Homepage Sidebar Width CSS

Hello, I had a chance to look over your code. Here are some changes that might help 🙂

Css changes can be added to your child theme css overrides. Better not to change core css so that your site doesnt revert to old styles on a theme update.

TO change the sidebar width, you are better off changing the html classes for the content area and sidebar area html blocks. Your tempalte makes use of mobile responsive framework of some sort.

If the css changes don’t work or if they don’t allow the mobile responsive media queries to take over on smaller screen widths, then you may have to toy with WHERE you place the css changes below.

CSS CHANGES

/* Make container 1200px wide */
.container {
  max-width: 1200px;
}

/* Allow thirteen column content area to expand to 850px
on desktops to fill in the extra gap now that container is
wider. The built in media queries should take over and force
it to narrow up on smaller views. If they don't, then where you
place this lass css declaration may be the culprit */

.container .thirteen.columns {
  width: 850px;
}

HTML CHANGES

<!-- Change your html structure of the page. Find these divs and change the fourteen to thirteen, and the four to five. This allows your sidebar and content areas to widen. The sidebar won't be 250px exactly but it will use the built in css media queries built into whatever framework your template uses for mobile responsiveness -->

<!-- New code should look like this. just change the class numbers. There will be more divs nested into this structure, but this just represents the html blocks you're looking for. -->

<div class="container" style=" ">

	<div class="thirteen columns sr">
	</div>

	<div class="five columns sidebarright">
	</div>

</div>

<!-- Old code to locate looks like this -->
<div class="container" style=" ">

	<div class="fourteen columns sr">
	</div>

	<div class="four columns sidebarright">
	</div>

</div>