Viewport not working

HTML & CSS
1

My wordpress blog (workmoneyfun.com) is on Genesis Prose theme. It is a mobile responsive theme. However, last year I had increased the width of content area using the following code.

body {
background: #f5f5f5;
margin: 0 auto;
width: 1080px;
}

#inner {
width: 1070px;
padding: 0 10px;
}
.content-sidebar #content-sidebar-wrap {
width: 1040px;
}
.content-sidebar #content {
width: 680px;
}
.sidebar {
width: 320px;
}
.full-width-content #content {
width: 1000px;
}

.footer-widgets-1, .footer-widgets-3 {
width: 330px;
}
.footer-widgets-2 {
width: 280px;
}

Google webmasters showed that my site was mobile-friendly till Feb 17, 2015. After that date, Mobile Usability displays errors. Checked on google pagespeed insights and it displays this error.

1127×631 94.1 KB

But when I manually clear cache using caching plugin and immediately checked on pagespeed again, mobile-friendly is working.

1157×639 99.1 KB

It just works one time only. Upon 2nd checking on pagespeed, again mobile-friendly is gone.

I tried using WPtouch, Mobile theme in Jetpack and other mobile edition plugins but the problem still exists. Please suggest how to solve this problem.

2

You haven’t posted anything to suggest that you are using media queries and the viewport meta element. Perhaps post a link to your site so we can see what’s really going one. :slight_smile:

3

My site is workmoneyfun.com

4

There are many elements of your page that have a fixed width. Google should NEVER have reported this as responsive.

The above code you added is terrible; you should never set fixed widths on elements since that just begs for broken pages when it comes to responsive.

Remove that code you added and revert it back to the original responsive you claim it had. From there, we can assist you in any issues you had in the first place that warranted you adding code in the first place.

@ralphm he said his site in #post1, slight oversight :stuck_out_tongue_winking_eye: .

5

@RyanReese I had added the code so as to expand my site’s content area horizontally. Original prose theme was only 970px width and I wanted content+sidebar to cover little more area so added the code to increase it to 1080px. How to be mobile friendly keeping my site at the current 1080px width? Please assist what I need to change in the above code so as the width remains 1080px as well as mobile-friendly too.

6

You say this theme is supposed to be responsive? Are you sure? They should have done all the work for you.

Without your code, can you take your browser window and reduce the width and have the page update and scale accordingly? If not, then this is not a responsive theme and considering the thousands out there, you might want to consider switching.

7

Yes the theme is responsive. Here is the link to the theme if you can confirm

my.studiopress.com/themes/prose/

And I edited the code as mentioned in this forum topic.

www.studiopress.com/forums/topic/increasing-width-of-content-area/

8

If you added those rules after any existing media queries then you would have over-ridden any small screen styles with larger screen styles.

Your rules need to come before any small screen media queries where max-width is used otherwise the latter rules will win out. Just because a code is inside a media query doesn’t make it unique and the cascade will take effect once out of the media query.

You could probably have avoided that issue by only applying your rules to screens larger than 960px rather than all screen widths,

e.g.

@media screen and (min-width:961px){
body {
width: 1080px;
}

#inner {
width: 1070px;
}
.content-sidebar #content-sidebar-wrap {
width: 1040px;
}
.content-sidebar #content {
width: 680px;
}
.sidebar {
width: 320px;
}
.full-width-content #content {
width: 1000px;
}

.footer-widgets-1, .footer-widgets-3 {
width: 330px;
}
.footer-widgets-2 {
width: 280px;
}

}

That assumes that your page was responsive before you added your rules.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.