How To Get Content Container Centered & 800px

[AliciaGuarino]

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

[davej]

Fixed-width webpage layouts are considered rather obsolete, unless you really don't care about users of mobile devices.

[Ingolme]

Setting the max-width to 800px and the left and right margins to "auto" should give the result you're looking for.

[AliciaGuarino]

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

[dsonesuk]

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;

[AliciaGuarino]

Thank you so SO much. That worked!

[AliciaGuarino]

Although is there a way to keep it mobile responsive?

[davej]

Use @media statements...

 

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[AliciaGuarino]

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?

[dsonesuk]

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

[AliciaGuarino]

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.

[dsonesuk]

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;