apply css to specific elements

Question

On my site I am using the theme Newspaper. I have modified it a bit with css. I am trying to get my sidebar (instagram, most popular, newsletter sign up) to have a width of 26% so it would be on the same row as the editor's picks.

The problem is that I can not get the sidebar to have a width of 26% without affecting the 3 blocks above editor's picks. Since both of them are .td-pb-span4. I have tried to solve this issue by using a more specific code just for the sidebar (code down below) and it still will not work. It is weird because the code I am trying to use will apply in chrome developer, however once I add it to my css it doesn't apply to my site. I would really appreciate any solution, I have been trying to figure this out for a few days and can't seem to find the problem.

code I first tried to add but it affected both the sidebar and the 3 blocks above editors picks (and I only want width:26% to apply to the sidebar)

.td-pb-span4 {
    width: 26%;
}

more specific code I am trying to add that only applies to the sidebar (it will work in chrome developer, but will not work if I apply it to my site css)

.vc_column.td_uid_70_5976097f07941_rand.wpb_column.vc_column_container.td-pb-span4 {
    width: 26%;
}

Roko C. Buljan · Accepted Answer · 2017-07-24 16:31:40Z

2

Don't do this:

/* index ~line 2817 */
.td-pb-span8 {  /* WHY */
    width: 70%;
    float: left;
    margin-right: 4%;
}

you're touching a well defined grid system that has to work out of the box:

.td-pb-span8 {
    width: 66.66666667%;    /* yep. There's no reason on earth you should set to 70% */
}

Grids are 12 based so do the math: 100 / 12 * 8

edited Jul 24, 2017 at 16:31

answered Jul 24, 2017 at 16:25

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user7548188 Over a year ago

If I don't use this how I am supposed to have the editors picks (span8) take up 70% and the sidebar take up 26%. I like how the site looks at that width, which is why I changed it. Is there a way to change it to do the same thing that is a better practice?

Roko C. Buljan Over a year ago

Dont. use grids. 100 / 12 and than pick the one you need. If you really want one cell to be 70%, than logically the one next to it should be 30% and not 33.33333% - not accounting for the odd 4% margins you used...

user7548188 Over a year ago

Sorry, I'm a bit confused. So is there anyway I could change the css to make this cell 70%, and if so is there any way you could help me? I was going to have this cell be 70%, with a 4% margin right, and than a 26% width sidebar.

Collectives™ on Stack Overflow

apply css to specific elements

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related