Change column width from 1/4 to 1/6 using @media

[barefootMarc]

Is it possible to change the col width from 1/4 to 1/6 using the @media css?

[David Martin – Support]

Sure, you simply target the bootstrap column class and adjust the percentage.

Four 1/4 columns to 1/6 would look like this:

@media (min-width: 768px){
.col-sm-3 {
    width: 16.66666667%!important;
}
}

That is a basic example, you would want to target more specific selectors .my-custom-class .col-sm-3 so you do not alter the whole site layout.

-David.

[barefootMarc]

It sizes them properly but still only keeps 4 columns per row

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

That’s because there is only 4 items per row and each row will start a new row of 4 items.

You will need to drag your columns into the Row in the page editor.

– David.

[barefootMarc]

like this?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Just by visually looking at it, I’d say that would be more likely to work. Have you published this or better yet, set up a test page?

-David.

[barefootMarc]

What I want is for each row to show a certain number of tiles based on screen width. I understand using percentage. But I can’t override the THEMEs bootstrap sizing for each row.

For instance
if I make a series of tiles like this
[1/4][1/6][1/6][1/6][1/4] I get 5 tiles and using css I can make them all 20%
what I want is for the tiles to display at 20 then the screen is 900px or more so you get 5 tiles
700-900 3 tiles so each column is 33%

[barefootMarc]

http://test.overdrivedesign.com/structure/

@media only screen and (min-width:960px) {
/* styles for browsers larger than 960px; */
.main_menu_row .col-sm-3 {
width: 20%!important;
}
} with the code

[David Martin – Support]

Hi,

You can do that with the code I posted above.

You just need to change the percentage values for the width and match the column class .col-sm-3 with what is being used on your page.

So, given you example for 5 tiles for that media query you use this:

@media only screen and (min-width:960px) {
.spb-column-container.col-sm-3 {
    width: 20%!important;
}
}

This however will not work if you have less than 5 tiles within the parent row. Each Row will make a new line.

Thanks,
David.

[barefootMarc]

I can get the widths to change accordingly, but the number of tiles per row do not change I must not be understanding your instructions.

[David Martin – Support]

What is your login, I’d need to see how the page content is setup.

If all items are in one Row, the items per row will change depending on how many times the item width is divisible by 100% of the width.

Thanks,
David.

[barefootMarc]

Its working. I’ll post the code if you want it.

-M

[barefootMarc]

thank you

[barefootMarc]

Spoke too soon. Not working. Having six columns per row seems to be throwing it off. It will change the percentage width accordingly, but then leave blank spaces. This only occurs when there are rows of 5 and 6.

[barefootMarc]

This reply has been marked as private.