- This topic has 2 replies, 2 voices, and was last updated 6 years, 6 months ago by
.
-
Posts
-
Hi!
I'm using Wellness Pro after a while of not using CSS etc. I'd like to make the pages & posts wider - I think they're currently 880px - so that I can more easily put an image to one side and writing besides it. I'm using the default layout of no sidebar.I have two concerns about changing the width. One is, will it stop it from being mobile responsive? I was reading through topics and this seemed to be a risk.
Secondly, I had a quick go at adding in the following css:
.full-width-content .site-inner { max-width: 1200px; }This seemed to succeed in making it wider as desired. Unfortunately it also applied it to the front page - and so made the widgets on the front page narrower (1200px instead of full width of screen) at the same time. I'm not sure how to work out how to apply it to just the pages & posts and not the front page.
If anybody could assist at all that would be really appreciated.
Thanks!I can't give a URL as it's in maintenance mode, but it's just like the pages in the demo: http://my.studiopress.com/themes/wellness/#demo-full
Here are a couple things that I think will help solve your problem, and they should also help with similar issues that arise as you're laying things out.
1. To keep your home page from taking on any distortions from measurement changes you make to the rest of your site, start by making a copy of what you have now. At the beginning of any rule that affects the home page, add the class .home to the front of the selector, like this:
.full-width-content {}
becomes
.home .full-width-content {}
If you look at your site's source code in your browser dev tools, you'll notice that .home class shows up in the <body> tag at the top - we call that a body class, and it's useful as all getout.
You can style the home rules one way and the other rules, without the home body class, a different way, and pretty much do whatever you want with them.
So you'll want to do ...
2. I realize that your theme uses px and rem all over the place and is still responsive. And that's fine for most elements.
For the biggest containers - like .content, .sidebar and .full-width-content, I would substitute percentages: everywhere you see width: 300px (or thereabouts) I'd change that to roughly 26%. For values between 640px and 880px I'd use a value between 60 and 70% - lower for two sidebars, higher for one, so the total is less than 100%. That way you have room for gutters.
On .full-width-content, set the width to 90 or 100% and the max-width to none.
Doing that makes your site responsive to most screen widths bigger than a tiny phone, where the theme itself has already set those widths to 100%.
Hope this helps!
Mary Baum
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.