Community Forums › Forums › Archived Forums › Design Tips and Tricks › Help with responsive issue
- This topic has 2 replies, 2 voices, and was last updated 10 years, 10 months ago by Stefani.
-
AuthorPosts
-
June 17, 2013 at 6:59 pm #46470StefaniMember
Hi there,
I'm working on a site using the Going Green child theme. I have tried not to change much at all in terms of margins, padding, widths, etc. Any CSS I've put in there is above the Responsive Coding.
I had to center the page and post titles so that they wouldn't be cut off on the left. My client may end up not wanting them that way, but it seemed like the fastest, best way to ensure it didn't get cut off.
On the home page, everything is shifted over to the left (text and slider). If I remove the margin-right of 30px that I put in there, it still doesn't help. Any ideas on how to improve this?
The sidebar widgets are actually moved over to the right a bit, and it would be nice if they were centered when on smaller devices.
Everything starts looking better when on an ipad or bigger. I've looked at http://www.responsinator.com/, http://ami.responsivedesign.is/, http://www.studiopress.com/responsive/ and my own phone to test it out. It's a pretty simple site, so I'd really like to make sure it looks good on mobile devices, which was why I chose this theme.
Thank you in advance for any and all help! The site is http://www.thegratefulbread.com/newsite.
June 17, 2013 at 8:10 pm #46479csbeckMemberWhen going responsive, you need to watch out for the widths of div's.
While looking through your code, you have a setting for the footer to be 1100px. I didn't look long enough but I'm not sure if that's in the responsive section of your styles.css or not. If you don't have another width setting for your footer in the responsive setting, it will maintain that width.
Same goes for your inner div.
I found possible issues in these style definitions:
(I believe this one is your responsive section)
.archive-page, .content-sidebar #content, .content-sidebar-sidebar #content, .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .full-width-content #content, .goinggreen-landing #inner, .goinggreen-landing #inner .wrap, .menu-primary, .menu-secondary, .sidebar, .sidebar-content #content, .sidebar-content-sidebar #content, .sidebar-sidebar-content #content, #content-sidebar-wrap, #footer, #footer .creds, #footer .gototop, #footer-widgets, #footer-widgets .wrap, #header, #header ul.menu, #header .widget-area, #inner, #inner .wrap, #sidebar-alt, #title-area, #wrap {...}(again I believe in the responsive section)
#footer, #footer-widgets, #header, #inner {...}(I think this is in your main section of your styles.css file)
#inner {...}I would suggest editing your responsive section definitions of these styles to show no width. You might have to mess around with that setting as well as margin and padding.
Hopefully this helps you go down the road of fixing your issue though.
Chris
June 17, 2013 at 9:59 pm #46484StefaniMemberThank you, Chris. I'll work on this tomorrow and hopefully it will all work out. I may come back with more questions...but hopefully not too many :).
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.