AliciaGuarino Posted July 29, 2015 Share Posted July 29, 2015 (edited) Hi everyone, I've been tweaking my genesis theme in wordpress and I have run into a bit of a snag in the css file. I chose a full-width layout for my website, but I would like the content container (only what contains the blog posts, page info, etc.) to be 800px wide. When I change the width of the content area, it automatically gets stuck to the right, and I have no idea how to center it and have it remain mobile responsive. If anyone could help it would be much appreciated! www.aliciaguarino.com Edited July 29, 2015 by AliciaGuarino Link to comment Share on other sites More sharing options...
davej Posted July 29, 2015 Share Posted July 29, 2015 Fixed-width webpage layouts are considered rather obsolete, unless you really don't care about users of mobile devices. Link to comment Share on other sites More sharing options...
Ingolme Posted July 29, 2015 Share Posted July 29, 2015 Setting the max-width to 800px and the left and right margins to "auto" should give the result you're looking for. 1 Link to comment Share on other sites More sharing options...
AliciaGuarino Posted July 30, 2015 Author Share Posted July 30, 2015 Thank you for your answer Ingolme, but when I set the width to 800px and add margin: 0px auto; to my stylesheet it is still not centered on the page. www.aliciaguarino.com Link to comment Share on other sites More sharing options...
dsonesuk Posted July 30, 2015 Share Posted July 30, 2015 It looks as though that float right is the problem, you have to use float: none; to disable float as it will override margin: 0 auto; Link to comment Share on other sites More sharing options...
AliciaGuarino Posted July 30, 2015 Author Share Posted July 30, 2015 Thank you so SO much. That worked! Link to comment Share on other sites More sharing options...
AliciaGuarino Posted July 31, 2015 Author Share Posted July 31, 2015 Although is there a way to keep it mobile responsive? Link to comment Share on other sites More sharing options...
davej Posted July 31, 2015 Share Posted July 31, 2015 Use @media statements... http://www.w3schools.com/cssref/css3_pr_mediaquery.asp Link to comment Share on other sites More sharing options...
AliciaGuarino Posted July 31, 2015 Author Share Posted July 31, 2015 Well, I think it's clear I have no idea how to use media queries. I posted the original full page content css before the changes to the media queries section and nothing happened. Can anyone explain this better? Link to comment Share on other sites More sharing options...
dsonesuk Posted July 31, 2015 Share Posted July 31, 2015 Use max-width: 720px, and for images use width: 100% .bpp_post_wrapper .bpp_img_wrapper img, .bpp_post_wrapper .bpp_img_wrapper a img { margin: 0; padding: 0; width: 100%; /* added by dsonesuk */} seems to do the trick 1 Link to comment Share on other sites More sharing options...
AliciaGuarino Posted July 31, 2015 Author Share Posted July 31, 2015 I added the code to the @media queries, but it only seems to work for screen sizes that are larger, as soon as I try going smaller, it stops being responsive. I must be doing something wrong. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 1, 2015 Share Posted August 1, 2015 You don't need to insert in to media query, it should come under default styling, the width: 100%; i added to the default styling for that selector that was already there. It just makes that image adjust to the width available to it, so as its parent container shrinks it will shrink with it, its width won't go beyond 720px, cause the parent containers width should be restricted to max-width: 720px; Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now