My website is hosted on blogger.com but I uploaded a completely custom theme and have adjusted the code to change the design a bit. The theme is mobile friendly except that my actual blog posts text is only showing half the page on mobile devices. It's as if the page is cut in half so half the sentence isn't showing. Even if you attempt to zoom out. Its just showing the desktop view on mobile without scaling so only half is visible. Everything else works perfect on the mobile website. I'm lost with how to fix this...thinking of adding meta tags to the head for each mobile device? I tried to add
<meta name="viewport" content="width=device-width, initial-scale=1">
but it didn't work. Basically, I need to change it so it automatically scales blog posts for different mobile devices.
CSS for my blog post font and page width has been specified
#test{
width: 680px;
margin: 0 auto;
text-align: left;
font-size: 15px;
line-height: 24px;
letter-spacing: -0.01em;
}
HTML
<div id="test">BLOG TEXT</div>`
Wondering if there is an easier solution?
Cheers,
Here's one thing you can try:
#test {
width: 680px; /* your main container */
margin: 0 auto; /* centering it */
max-width: 100%; /* don't let the container be bigger than the body! */
/* ... the rest of your css... */
}
That way, if the viewport is smaller than 680px (most cell phones are), your content won't overflow. If that doesn't work, you might consider posting a link to your blog here so we can see the full context of what's going on.
I am having trouble making content scale proportionally when it get to mobile devices.
On a desktop the site looks like this http://imgur.com/a/hhsIb (first image)
I set a media query to make it look like this (second image)
#media only screen and (max-width: 867px) {
#header-wrap{
padding: 0px 0px 0px;
max-height: 100%;
}
.right.nav {
float: none;
}
.nav{
}
ul {
display:inline-block;
padding: 0px 10px 0px;
min-width: 300px;
}
.left {
float: none;
}
.logo{
margin:auto
}
}
But when viewed on a mobile device it looks like the desktop (third image)
I am also trying to make the nav move from being floated right to aligned in the center once it hits the query but I don't know how to do so.
Here's the JS Fiddle http://jsfiddle.net/u9shm5af/
You need to add the viewport meta tag to the <head> section of the document:
<html>
<head>
<title>Robert Fikes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
...
</body>
</html>
Mobile browsers, without this tag, render web content at a fixed width, so that older sites that don't have responsive styles aren't cut off.
From the Safari Developer Library:
The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-10. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different.
My last question in terms of CSS was this one:
Website background responsive
it was about a responsive background and i got this one fixed after a long research. I tryed to use some of what i learned and got it nearly working as good as i wanted but(!) i messed something up.
<style type="text/css">
.logo {
display: block;
text-align: center;
margin-top:40px;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
<img src="https://www.google.com.tw/images/srpr/logo11w.png" class="logo"/>
just to keep it simple i put both together. As you may not see in a fiddle or something like this. It is working somehow fine in lower resolutions but if i screenshot it on my 1920x1080 screen and just check the left to the logo and right to the logo difference in photoshop i can clearly see that the difference from the right border to the logo is larger than from the opposite site.
I realy appreciate some ideas!
A combination of max-width: x% and max-height: x% keeps the image in the correct proportions when resizing (Keep the percentage size the same for both).
Making the image display: table allows the flexible width image to be centered with margin: 0 auto
In this example, the image is 400px x 400px with a max-width / max-height set at 40%. This is just to make the re-size obvious for the demo. Open it full screen and re-size the window to see the shrink.
CSS / HTML / Demo
.logo {
display: table;
margin: 40px auto 0;
max-width: 40%;
max-height: 40%;
}
<img class="logo" src="http://www.placehold.it/400">
I have a page i've created which works fine in a desktop but get's messed up in a mobile browser.
This is the mobile version. I have a header and a .container(the one with gray background) set to width 100%. Inside .container i've a .wrapper set to width: 900px; and margin: 0 auto;. Why is the blue background and the gray background rendering till about half of the page witdh? What is the best way I can approach the problem to create a page like the desktop version on the mobile as well?
I believe your wrapper may be causing the issue. Instead of setting a fixed width for the object do:
.wrapper {
max-width:900px;
width:100%;
display:block; //for centering
margin:0 auto // for centering
}
Should solve your problem and make the website more responsive throughout different platforms.
Good luck! :)
NOTE
If you are not already doing so, take rajkumar's comment and add:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's your wrapper and li width. Set them to percentages.
.wrapper {
width: 90%;
margin: 0 auto;
}
li {
width: 30%;
....
}
if you want create a site for both desktop and mobile..Try all width in percentage.because percentage only fit width automatically according to screen resolution.suppose you give in pixels the screen was not adjustable in all screen resolutions.its only fix according to your size only.
In your case please make sure for all width in percentage.
and also please conform the media type for get screen width in header section
<meta name="viewport" content="width=device-width, initial-scale=1">
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%;}