[Resolved] Change number of Bootstrap grid columns with Mediaquery

[Author]

Posts

[gaborG]

I have a 4-column grid that works pretty well on desktop, but it looks a bit wacky on iPad because the column widths are smaller there.
Is there a way to change the number of columns in the grid via mediaquery? The loop wizard only allows one loop entry at a time, not two, so I don't know how to do it.
Thanks.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Gabor,

Thank you for contacting our support forum.

You are indeed able to modify the columns using a media query.

However you do also have the option of changing the grid type by specifying you would like to use.

We use bootstrap so the boostrap grid documentation should be able assist you.
hidden link

Please let me know if this helps.

Thanks,
Shane

[gaborG]

Thanks for the info. I added breakpoints to other screen sizes, but unfortunately it doesn't break at the point where I want it - it still has 4 narrower columns on iPad instead of 3 or 2 wider ones.
Now...
I use the Tooltip Starter child theme. How do you suppose I could change the breakpoints the best way without having to redo it every time the parent theme gets updated? I could compile a customized bootstrap css but that is included in the parent theme, no?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Gabor,

To avoid the problem with updates you could create the css as a plugin to add the additional css to the theme.

This way you can avoid losing your changes whenever the theme updates.

Or you can use a plugin that allows you to add custom css to your website.

Please let me know if this helps.

Thanks,
Shane

[gaborG]

You mean like overwriting the default bootstrap css in your Layout CSS editor?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Gabor,

Yes this works just as well.

Thanks,
Shane

[gaborG]

Shane, there is a problem.
The documentation all around the internet (at least what I could find) points to a file called "bootstrap.less" what should be imported and then its values like @screen-xs changed according to how I want the breakpoints.
However, the Toolset Starter theme contains no bootstrap.less file. No less files of any name at all.

I opened several css and scss files to try to find the one that contains this info, but I didn't find it.

Could you please ask your developers in which file exactly does the Toolset Starter theme keep the bootstrap grid breakpoint width information? So, which file do I have to import into the CSS editor to be able to edit it? And, in case this theme, for some convoluted reason, doesn't contain @screen-xs and similar data to mark the breakpoints, could they perhaps tell me how am I supposed to change the breakpoints then?
Thanks.

[gaborG]

I found variables in the /bootstrap/sass/_variables.scss file.
I did this:

@import url(../toolset-starter/bootstrap/sass/_variables.scss); /* the relative path from my style.css */

$screen-xs: 200px; /*stupid values just to see if it works or not */
$screen-sm: 300px;
$screen-md: 900px;
$screen-lg: 1200px;

But it doesn't work. Without the $ symbols either.
I understand that this is borderline out of scope for this forum, but it's really very difficult to find the actual answer to this question on the internet.

The only solid answer I found so far was to compile a customized bootstrap file. If you can tell me how to use that without being overwritten by a Toolset Starter theme update, that works for me too.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Gabor,

The bootstrap css is compiled, so the only way to do it is compile it again.

The only way I can think of doing this is by creating a plugin to enqueue your custom bootstrap script to the theme.

To create the plugin please follow the instructions in the link below.
hidden link

To enqueue the script you will need to take a look at the link below.
http://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402

This should allow you to add the css without losing the changes each time.

Please let me know if this points you in the correct direction. I must apologise for this being so difficult to achieve as you noticed our css script is compiled 🙁

Thanks,
Shane