Community Forums › Forums › Archived Forums › Design Tips and Tricks › Mobile Responsive Snag
Tagged: css, mobile responsive, scribble
- This topic has 5 replies, 3 voices, and was last updated 9 years ago by paulag01.
-
AuthorPosts
-
March 23, 2015 at 9:38 am #145337paulag01Member
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
http://www.thepaulagcompany.com/blog
PaulaMarch 23, 2015 at 10:39 am #145340CarloMemberHi 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.
March 23, 2015 at 3:11 pm #145371paulag01MemberHi 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!
PaulaMarch 24, 2015 at 3:25 am #145429WisdmLabsMemberHi,
Try adding this to your child theme style.css
@media (max-width: 800px) { .content-sidebar #content-sidebar-wrap, .content-sidebar #content, #inner { width:100% } }
March 24, 2015 at 6:57 am #145447paulag01MemberI 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.
March 25, 2015 at 1:27 pm #145645paulag01MemberI 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.