Mobile Responsive Snag

[paulag01]

Hi there,

I am continuing work on making Scribble act properly on mobile. I got mostly there with a client site, but with my own site I am running into issues on the Blog page and posts. The rest of the site is getting there (except the tutorials).

It seems I am missing something in my media queries specifically for posts and blog page. I got the sidebar to drop to the bottom and be 100% width, but the post itself isn't behaving (expanding much wider, unable to scroll/read).

Can someone point me to the error of my ways.

URL to the blog is http://www.thepaulagcompany.com/blog

Is there a tool I can use (similar to firebug) for mobile where I can see what it thinks it is using in my css? I have tried the Chrome developer tools but can't see how to find this info.

Thanks
Paula

http://www.thepaulagcompany.com/blog

[Carlo]

Hi Paula. You can use the Chrome inspector. Next to the x button, there is another button that moves it to the side instead of the bottom of the window. Then you can resize the inspector which will allow you to test the responsive design.

It looks like the issue is that your theme stylesheet is hard-coding widths – on lines 628, 784 and 807. In your media queries, you should overwrite these to use width: auto;.

Let me know if you need more help.

---

Comprehensive, easy to follow Genesis documentation

[paulag01]

Hi Carlo,

Thanks for taking time to respond. I am totally befuddled by that damn Chrome inspector (much prefer firebug) -- as in I cannot see what is missing in certain media queries and what I see in there for say iPad 4 isn't what I see on my iPad 4.

Anyway -- I addressed those hard coded widths in the media query as follows (since this problem is only on the phone sizing) but to no avail:

/* Smartphones ------------------------------------------------ */

@media only screen
and (max-device-width : 320px) {

#wrap {
width:100%;
}

#header .wrap {
background: url('images/interior-mobile-320.jpg') no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
width:100%;
}

#content {

width:auto;
}

#inner {
width:auto;
}

.full-width-content #content {
width:auto;
}

#content .entry-title, #content .entry-content {
padding-left:10px;
padding-right:10px;
}

#aftercarousel .wrap {
width:auto;

}

#welcome .wrap,
#services .wrap,
#about .wrap,
#clienttest .wrap
{
width:auto;

}

.content-sidebar #content-sidebar-wrap,
.full-width-content #content-sidebar-wrap,
.sidebar-content #content-sidebar-wrap {
width: auto;
}

.content-sidebar #content,
.sidebar-content #content {
width: auto;
}

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
padding: 0;
}

#footer-widgets .wrap {
width:auto;
}

.footer-widgets-1 {
float: none;
width:auto;
}
.footer-widgets-2 {
float: none;
width:auto;
}
.footer-widgets-3 {
float: none;
width:auto;
}
.footer-widgets-4 {
float: none;
width:auto;
}

I guess where I am confused is what div is different on latest posts page & single post pages vs regular pages that is being missed (since regular pages are displaying just fine on the phone.

Why width:auto; vs width:100%? Just curious.

Appreciate any additional insights... it is one of those things that I sense is so close and yet eludes me.

Thank you!
Paula

[WisdmLabs]

Hi,

Try adding this to your child theme style.css

@media (max-width: 800px) {
.content-sidebar #content-sidebar-wrap, .content-sidebar #content, #inner {
width:100%
}
}

---

http://wisdmlabs.com/

[paulag01]

I did add that in (and since deleted it) since it didn't do anything. I would think that the other max-width points already covered the 800px width device.

[paulag01]

I believe I found my solution - or at least partial solution for now. Had to do with video resizing. So I will mark this post resolved even though the solutions mentioned above are not the resolution.

[Author]

Posts