I am working on a design. The design is located at the link
http://jodbaki.com/apply-now.
In it desktop version is working fine but when. I see it in mobile then the form is going out of the image from right side. How can I adjust it ???.
This is because of your input,textarea and select. Try adding CSS media query once the width is smaller than 400px, shrink all your fields from 150px to 100px.
#media screen and (max-width: 400px) {
input,textarea,select {
width: 100px !important;
}
}
Your
<tbody style="float:right; background:white; margin:12px; width:285px;">
should be a class instead. If showing on mobile, the element doesn't change at all. If you have it as a class (with any name, maybe .applyform), then you can change the CSS for both your desktop version and the mobile version.
The desktop version, you can copy the tbody styles above and make it a class. For the mobile version, I suggest just changing the float:
.applyform { float:none; margin:0; }
Without float, your form will be 100% width.
Related
So I was working on a static website that uses only HTML and CSS. I made the website in desktop view so when screen size is more than 1220px the website will look exactly as I want it to. For selecting services I have a picture as a background and some text inside it. The dimension of picture is 420x469 px. I have a total of 4 pictures and I put them in pairs of 2. So like this (Service 1) (Service 2). I have padding of 7.8% on both left and right side and 8% padding on bottom. Currently if someone access my website from mobile, then service 1 shows with 7.8% left side padding and half cut picture. Then service 2 below it just like Service 1.
What I want is that when someone uses website from phone, they see the picture completely and no padding. and if there is enough space, then some padding pls tell how i can do that
Have a look at these Docs here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Then you can use CSS like this
.my-class {
/* Mobile - Desktop */
padding: 10px;
}
#media only screen and (min-width: 600px) {
/* Tablet - Desktop */
/* It will overwrite the other less specific classes padding */
.my-class {
padding: 30px;
}
}
<div class="my-class">
<h1>My Content</h1>
</div>
Bonus tip: Don't work with max-width in general, but with min-width. That means you will be working mobile first.
in css add this line it will work perfectly in any screen size
.service1{
width: 100%;
height: auto;
}
Define a #media query specifically for 'phones' like this :
#media (max-width: 640px) { /*...*/ }
You may want to remove the padding/margin for any smaller screen sizes. Try like this:
#media (max-width: 978px) {
.container {
padding:0;
margin:0;
}
}
Otherwise, Try using bootstrap it works very well in Adjusting margin/padding with screen size.
I have an responsive html email design which I did using this tutorial from campaign monitor but I have one problem my image is not fitting to the device when it is viewed on mobile,after designing many templates and reading a lot on email designing blogs I learned that gmail by default remove css or styling in the head part and allows only inline html .So now in my case I want my image to fit the device width but its not fitting when I am sending in mail but I can see on browser because of below coded media query .
#media screen and (max-width: 480px) and (min-width:300px) {
.col185{max-width:100% !important;}
.col180{max-width: 100% !important;}
.col180 img{
height: 155px;
}
}
. So what is there any way where in i can see image stretched on my mobile device also. This is my js fiddle link .
Let's say that the name of the div that contains the image is pic You should do this
CSS
.pic img{
width:100%;
height:100%;
}
This will allow the image to re-size itself according to the parent div. If you still don't understand this method let me know and i'll expand on it
You need to change to width or min-width, and right now you have max-width. See below:
#media screen and (max-width: 480px) and (min-width:300px) {
.col185{min-width:100% !important;}
.col180{min-width: 100% !important;}
.col180 img{
height: auto;
}
}
Otherwise, you're just saying to use height: 155px and width will adjust to that height.
Also, remember that not all mail clients render your CSS the same. Many of them, specially Outlook, won't accept many of your CSS rules. Just to be sure, you can run your code through http://premailer.dialect.ca/ (free) or similar so you can pre-check what will happen with your mail
I have a responsive site which displays form buttons at the standard width at all monitor sizes, down to 481px, where after the width of the button is set to 100% of the containing div.
This works fine in all modern browsers with the following code:
#media screen and (max-width: 480px)
.button {
width: 100%;
}
#media only screen and (min-width: 769px)
.button {
width: initial;
}
As the CSS is mobile-first, "width: initial;" is resetting the button to the original size, exactly as I would like.
However IE8 doesn't recognise this, so it thinks "width: 100%;" is the button's width for all monitor sizes, causing the button to always span the page width. How would you get around this other than giving an absolute pixel value?
IE8 does not respect media queries you will need a polyfill script to add this functionality.
https://github.com/scottjehl/Respond
I have a logo with a menu next to it:
This is the HTML:
<div id="logomenuwrapper">
<div id="logo"><img src="img/logo_light.jpg"/></div>
<div id="menu">
<ul>
<li>About</li>
<li class="notfirst">Work</li>
<li class="notfirst">Contact</li>
</ul>
</div>
</div>
This is the CSS:
#logomenuwrapper{overflow:hidden;}
#logo
{
padding-right:1.2%;float:left; max-width:100% !important;
max-height:100% !important;
display:block;
}
#menu{float:left;padding-left:1.2%;font-size:0.875em;border-left:1px solid #ea4a4a;}
#menu ul li.notfirst
{
padding-top:0.3225em;
}
I have added some media queries that will make the menu font smaller when screen gets smaller.
At some point, the menu will be smaller than the logo. What should I add to make the logo scale with the menu? I already added:
img {max-width:100%;}
A picture of how it looks like on smaller screen (as you can see the logo is too big):
Try changing your media queries to something like this:
#media screen and (max-width: 800px) {
body {
font-size: 85%;
}
#logo img {
width:84%;
}
}
#media screen and (max-width: 400px) {
body {
font-size: 75%;
}
#logo img {
width: 75%;
}
}
and #logo to something like this:
#logo {
padding-right:12px;
border-right:1px solid #ea4a4a;
float:left;
}
Working Example
Note: Be sure to put #media screen and (max-width: 800px) above
#media screen and (max-width: 400px) as seen above.
See Why do the order of media queries matter in CSS? for more information on placing media queries in order.
It's admittedly not semantic... but have you looked into scalable text - FITTEXTJS
It uses javascript - but it allows the text to scale as well. You already have a solution to the image - But I see the problem lies in the text itself - Using media queries has you define break points, but doesn't make your text as fluid as YOU need it. I'll edit my post with a fiddle as soon as I come back from the gym, just thought I'd post this thinking it MAY be helpful.
You should set the width of the image wrapper (#logo in your case) inside the mediaqueries to get the image scaled. Or set it globally in percents (see jsfiddle link).
Also add max-width: 100%; for all images.
img { max-width: 100%; }
#logo {
width: 14%;
// remove max-width:100. not needed.
...
}
See http://jsfiddle.net/weP7u/ and resize the browser
I think your going about this the wrong way. Why make the text smaller when the screen is smaller? This probably occurs on a mobile device where you need to make sure you have touch targets that are big enough to reliably click your menu. You could keep the text the same size, and add padding/margin to make the touch target better, but that makes this menu even "bigger" next to the logo.
Instead at the smallest size, try stacking the nav underneath the logo and then once that looks lost as the screen gets bigger, bring the menu up to the right of the logo like you currently have. This neatly gets around doing any text or image scaling, while enhancing your design for small devices.
I put together a demo for you. Be sure to view the full preview so you can resize and see the new menu behavior.
You could use any pattern you want at the smallest size, I went with a simple stacked pattern because your menu easily fits in one row. If you had more navigation items in the future, you could do an accordion or even move to an off-canvas approach.
Further reading:
Check out Chris Coyier's post on making designs tablet friendly, some great tips in there.
Also, check out Trent Walton's short post about type and touch.
img {
max-width: 100% !important; /* Set a maxium relative to the parent */
width: auto\9 !important; /* IE7-8 need help adjusting responsive images */
height: auto; /* Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
display: block;
-ms-interpolation-mode: bicubic;
}
The above CSS is taken from Twitter Bootstrap which allows for responsive images. The only problem is this has no effect in Firefox and IE.
In the following case:
<div class="row-fluid">
<div id="logo" class="span4">
<img src="<?= get_template_directory_uri() ?>/assets/images/logo.png" />
</div>
</div>
http://dev.netcoding.net/lowsglass/about-us/ - Here is a page showing the problem.
In Firefox or IE, shrink the page to below 432px and you will see that the images do not follow max-width anymore (while above 764px they do).
How can I fix this – without using image containers – to make responsive images work in Firefox and IE?
I've struggled a lot with Firefox / IE and max-width, specifically when on elements of display: inline-block. I use the CSS only solution below to add my fixes.
// Styles for Firefox
#-moz-document url-prefix() {
#logo img {
width: 100%;
}
}
// Styles for IE10
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#logo img {
width: 100%;
}
}
Firefox fails to scale images with max-width/height if width/height is not defined. So there are two ways.
1. Set width and max-width:
width: 100%;
max-width: 100%;
2. Use max-width and max-height in vw and vh:
max-width: 90vw;
What means the image will have max 90% of visible width. Have fun!
Instead of width:auto, try width:100%.
Best,
Cynthia
Actually, the problem isn't the img tag being affected, but the span* containers. When Bootstrap Responsive gets to a certain point, it turns off floating, and sets width to 100%. When that container pops back to 100%, the child within (your img tag) does exactly what you told it to do, which is expand to max-width of 100%.
Look at this from responsive.css... above the declaration in the stylesheet, you'll see this:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: none;
margin-left: 0;
width: 100%;
}
That is what is causing the img to "resize" ... its container no longer shrinks past a certain point, due to the way Bootstrap's responsive styles are set up.
To block this, you could either modify the Bootstrap stylesheet (in which case you will have to redo the change anytime you want to update your Bootstrap files), or you can, in your own stylesheet, do something like the following:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: inline-block;
float: left;
}
That will put the floating back, however, you're still left with width as an issue, as the default Bootstrap style at that screen-width is trying to set width to 100%. You could try setting width:auto and then hopefully the widths for each specific span-step (.span1, .span2, etc.) will be allowed to take over, but you'll really have to test it out to see what is going to work best for your situation.
Bumped in similar problem after implementing large amount of site design using Bootstrap framework and only Chrome for debug... Biiig mistake © :) It appeared, that cool fluid Bootstrap styles didn't work for images in IE and Mozilla at all. All images were not resized and had original width, sometimes much wider than I've expected to see...
I had a lot of similar places with two columns of divs - span6 for left column and span6 for right one (those are styles for fluid Bootstrap grid). Sometimes in those columns images were placed between text lines, and as you see, images didn't resize well in IE\Mozilla and all of the cool design became not good at all :(
After googling and trying some advices from github I've decided to use jQuery :) I added class to column container (imageContainer for fluid span12 row), and added classes 50perc for images which I needed to resize properly (size of each image should be 50% of container's size). And here's the code:
$(function(){
var cont = $('.imageContainer');
$('.50perc').each(function(i, el){
$(el).width(cont.width() / 2);
});
p.s. Actually it will be much effective to use this function in window.resize event handler :)
Ran into the same problem and still haven't found a fix or CSS only hack, except for forcing width: 100% at small browser sizes, when the natural width of the image will usually be larger than the width of the page (here I've assumed I don't have any images narrower than 480px):
img
{
width: auto;
max-width: 100%;
height: auto;
}
#media screen and (max-width: 480px), only screen and (max-device-width: 480px) and (orientation: portrait)
{
#-moz-document url-prefix() {
/* Firefox doesn't respect max-width in certain situations */
img
{
width: 100%;
}
}
But that will still force images that have naturally smaller widths to get blown up, which is bad. So at that point, if Javascript is feasible or already in use, I would add this to hit every image:
PSEUDO CODE:
$('img').css('max-width', this.actualFullSizeWidth + 'px');
...which should override the CSS max-width rules, and guarantee the image doesn't get larger than it's actual width.
Responsive images for Firefox, IE, Chrome. Simple solution that works in Firefox
<div class="article"><img></div>
.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}