Adjust column width in wordpress

HTML & CSS
1

Hello -

I have a wordpress site that uses a primary section and a sidebar. Right now, the sidebar is too wide, and it’s messing with the format of the content of the page. I was given the following code to make adjustments; however, only the section#primary works.

section#primary {
	width: 80%;
}

section#secondary {
	width: 20%;
}

Any guidance on how I can adjust the secondary?

2

I realized that the page is probably only one column, so I may need to adjust the size of the widget that I added as the sidebar. Seems more complicated now, but I have my fingers crossed that someone here can help.

3

Welcome to the forums, @marodig.

Without seeing the HTML and any other relevant CSS, it’s hard to offer suggestions. Do you have a link to a live page so we can see what’s going on?

4

Hi TechnoBear -

Thanks for taking a look. The site is chuckwallacamping.com. You’ll see the widget on the right with the title “this is the one that needs to be thinner”.

5

It appears that you are using the “Bootstrap” framework.
I don’t use use Bootstrap myself, so have limited knowledge about it but have picked up a few things from the forums.

With Bootstrap these are redundant, let the framework take care of this, that’s what it’s there for.
#primary has tha class of col-sm-8 while #secondary has col-sm-4, in BS that means 2/3 and 1/3 widths (8/12 and 4/12). A 80% 20% is 4/5 and 1/5, but BS divides columns by 12ths so I guess you could try col-sm-9 and col-sm-3 or col-sm-10 and col-sm-2.

Probably someone who really knows BS could advise better. But when it comes to these frameworks, stick to the rules and methods of the framework or don’t use the framework at all.

2 Likes
6

Thanks @SamA74

I’m not well-versed in CSS much at all, so pardon the really basic questions.

I see in the source code the line class = “col-sm-8”. Now, is that something that can be modified in CSS, or would I find that somewhere else? I hear there’s a place where you can manage the PHP, but I haven’t looked into that yet.

7

These are classes related to the Bootstrap framework, the BS css references them. You can edit the classes in the html to other valid BS classses.
BS assigns width to columns by dividing a row into 12, then giving a number of 12ths to the columns. The total must add up to 12.
So 8 is 8/12 (or 2/3 in proper fractions) and 4 is 4/12 (or 1/3 in proper fractions) so that’s 66.6% and 33.3%
To get the sidebar column narrower in proportion to the main, divide the 12th differently beween them.
So to get 12 you can have 9 and 3 or 10 and 2 as your column widths.

1 Like
8

@SamA74 so, it looks like this did the trick in CSS

section#primary {
width: 80%;
}

div#secondary {
width: 20%;
}

it wasn’t a section, but a div…

9

One good reason not to over specify your selections using just #primary would be way more than enough selection “weight” (being an ID selector) to override Bootstrap’s rules.

Though I still question the wisdom of overriding Bootstrap instead of working with it, or without it altogether if you don’t want to play by its rules.

10

I’m admittedly not the best at math, but I’m not able to divide 12 into whole number fifths. It seems to me that instead of 80% and 20% it would need to be either 9 and 3 or 10 and 2 for the columns to conform to the way bootstrap is designed to work.

11

I’m not a WP expert either, but I have a few questions. :slight_smile:

The one who gave you that code, was that the person that helped or built the site for you?
If so, ask that person where you should make changes to customize the site.

Otherwise:

  • Check in the WP dashboard for places to edit the site code.

  • What theme is your site using? (I wonder if it is a theme built on bootstrap.)

  • If so, is there a child theme in the site theme directories?

  • Or is the BS implemented in the WP code without an imported theme?

All above boils down to where you should make the changes. If it’s a bootstrap theme that later could be updated I think changes should be made in a child theme.

If it is BS implemented in a customized WP code I think you could probably make changes directly in the code.

12

Yes, BS won’t do 5ths so I mentinoed 9 & 3 or 10 & 2 as BS friendly alternatives.

…is my personal preference.
But if you are doing bootstrap, do bootstrap.

The problem with overriding the frameworks methods with things like percentages is it breaks the responsive behaviour when the screen get’s smaller and the columns wrap and stack. They will keep those percentage widths until you add a query to remedy that.
But then why bother loading all that framework bloat if you are only going to re-code all the RWD work yourself?

Two paths: use the framework or don’t use the framework.
Don’t load a framework, then not use it.

3 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.