Why isn't max-width and width: 100% working?

Question

The problem is with my blog. So I can't put code here. Ok, if you see, when you open this blog in desktop browser, and decrease the width of browser, the content of the blog shrinks, i.e., width is decreased (it's not scrolling in horizontal dicrection). This is because of width: 100% and max-width properties used.

But when you open this blog in your phone's browser, it doesn't follow them, although screen resolution of mobile phones are less than desktop browser. Why doesn't the content shrink? Am I understanding something wrong?

I think it's the problem with the browser! Don't use %, instead set the width to maximum device width! Here's one link. http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web — kiner_shah, Jul 04 '16 at 12:48

score 0 · Answer 1 · answered Jul 04 '16 at 13:14

The max-width should contains pixels(px) instead of a percentage symbol(%).

1) Add this to your head of the file:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

2)Try out media queries such as

<style type="text/css">
/* default styles here for older browsers. 
   I tend to go for a 600px - 960px width max but using percentages
*/
@media only screen and (min-width:960px){
    /* styles for browsers larger than 960px; */
}
@media only screen and (min-width:1440px){
    /* styles for browsers larger than 1440px; */
}
@media only screen and (min-width:2000px){
    /* for sumo sized (mac) screens */
}
@media only screen and (max-device-width:480px){
   /* styles for mobile browsers smaller than 480px; (iPhone) */
}
@media only screen and (device-width:768px){
   /* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}
</style>

Did you try adding what I said on the header and then the rest of the thing below ? — Giorgos Neokleous, Jul 04 '16 at 21:42

score -1 · Answer 2 · answered Jul 04 '16 at 12:50

-1

You should use

<meta name="viewport" content="width=device-width, initial-scale=1">

in your page html's <head> to make your blog mobile friendly

answered Jul 04 '16 at 12:50

Alexandr Fedoseev

67
5

Why isn't max-width and width: 100% working?

2 Answers2