How can I reduce the total width of my theme layout?

If you want to get your content down to 655px wide, you first have to remove the min-width property that you’ve set in this rule of your child theme’s style.css file:

#primary {
   box-shadow: 3px 5px 7px 7px rgba(0, 0, 0, 0.2);
   min-width: 960px;
}

Then you can try adding this rule to set the content width to 655px:

#branding, #main {
   max-width: 655px;
   margin-left:auto;
   margin-right:auto;
   float: none;
}

Thanks, but this kinda messed up my site badly.
I have reverted back to before those changes, but did take a screenshot to point out the issues caused: https://postimg.org/image/tqk06ds2h/

That’s surprising. I tried it out on both Chrome DevTools & Firebug and it looked like it would work. It looks like the #main element is still floating to the left. You copied & pasted the new rule in its entirety at the end of your child theme’s style.css file, and you removed the min-width property from that other rule?

OK, if you added the new rule before this one:

#main {
   float: left;
}

Then the #main element is going to float to the left, which is why it looks like that in your picture. Make sure you paste it at the end of your child theme’s style.css file, or at least after that rule.

I tried this in FireBug and it fixes the branding, but the content overlaps the widget still. It also leaves a large transparent area below the widget.

Add these two rules as well:

#primary {
   background-color: #edf6fe;
}
#content-wrapper {
   margin-right:160px;
}

Oh nice. Thank you!

Oh darn. Seems it doesn’t like portrait layout on iPad. Not a big deal though.

Oh nevermind, looks like my iPad was just using an old cache for some reason.

• This reply was modified 8 years, 1 month ago by cooljosh3k.
• This reply was modified 8 years, 1 month ago by cooljosh3k.