Change site width: .content & .sidebar-primary

[meltdown]

To increase the site content width and decrease the sidebar width I've added the following to my Additional CSS:

.content {
background-color: #E7DDFF;
	padding: 20px 30px 5px;
}

.content {
	float: right;
	width: 850px;
}

.sidebar-primary {
	float: right;
	width: 260px;
}

Amazingly it did as I had hoped. However, I now see that when viewing the site on smaller @media only screens the site content is too wide, forcing the user to scroll left to right.

Question: Is there a better way to alter my content and sidebar widths? Or something I could add to the @media only screens section on the stylesheet?

Thank you for your suggestions! Tim

https://missingmadamz.com/

[Brad Dalton]

Try this tutorial, its old but i think it still works.

Another option is to use CSS grid.

---

Tutorials for StudioPress Themes.

[meltdown]

Thank you! I'll give it a look 🙂

[meltdown]

I see that if I apply the desired changes to .site-inner, .wrap, .content and .sidebar-primary in my style.css, then the mobile version of the site retains its integrity, meaning that the content remains visible within the confines of the mobile screen, as desired.

However, this does not work if I copy and paste the changes to my Additional CSS Customizer. Are the changes still protected from being over-written on a theme update?

Thanks.

[meltdown]

And one more thing, if I may: I would like to change the background color of the .content area, and give it a little wiggle room. This works if I add it to Additional CSS Customizer:

background-color: #E7DDFF;
	padding: 20px 30px 5px;

But the padding upsets the page layout (if I use no padding, the content is butted up against the edge of the content area).

If I attempt to add the code to .content in the stylesheet, it seems to have no effect. How can I apply this? Thanks again.

[meltdown]

OK, this was as simple as me not clearing the cache. A neat trick by the support people:

Clearing your browser cache and any caching or minification plugins can help. Incrementing the version number in your child theme's functions.php after making changes to your stylesheet is also worthwhile:

define( 'CHILD_THEME_VERSION', '3.2.4' );
Changing the version there will append a new cache-busting string to the stylesheet URL and cause the browser to fetch a fresh copy.

Happily resolved 🙂

[Author]

Posts