Hi I’m trying to insert a simple grid into the Puro theme on my website and the columns aren’t working and are showing up as separate rows vertically. Can you please look into what the fix maybe? I’m using the code below.
<div class=”container”>
<div class=”row”>
<div class=”col”>
1 of 3
</div>
<div class=”col”>
2 of 3
</div>
<div class=”col”>
3 of 3
</div>
<div class=”col”>
4 of 4
</div>
</div>
</div>
Hi 🙂
Do you know what plugin is supplying the styles for this grid?
If there isn’t a plugin added that is styling the classes used then a grid won’t be added. If you’re looking for something like that, you could consider https://wordpress.org/plugins/shortcodes-ultimate/ which has shortcodes available for columns. This is just one plugin option.
I’m using Site Origin Editor which I think may be interfering with the code
I am using a Bootstrap plugin
Themes won’t necessarily add support for the class names container, row and column. It isn’t a standard that’s part of most themes. This is why I asked which plugin might be adding these styles because the theme isn’t adding style support for container, row and column. If you’re looking to add columns within an Editor widget, Shortcodes Ultimate is probably the most lightweight method I can think of doing that. Please see the link above to the plugin 🙂
We posted at the same time. Please, send a link to the page and I’ll check why your Bootstrap plugin isn’t targetting those classes.
Thanks for the link. Please, can you check the link from another browser or in private browsing mode? For me, it goes to 404.
If you’d like to send links privately on the forum, you can use the Set as private reply checkbox. If we could finish the topic on the forum, I’d really appreciate it. If we switch to email half way it leaves the forum a bit unreadable.
This reply has been marked as private.
Thanks, the grid isn’t working because there aren’t any CSS rules targetting those classes. I don’t see any mention of Bootstrap in the page source, there isn’t a stylesheet or any supporting assets loaded from Bootstrap on the page.
Here is how that looks in the inspector: https://imgur.com/a/kJZNS3v. There aren’t any rules targetting those classes at the moment.
I have to head out now. To check if this is a theme issue, you could temporarily switch to a default theme like Twenty Seventeen. That’ll let you know if it’s a theme problem and is quite a quick test.
For interest sake, here is how this could be done using Shortcodes Ultimate: https://getshortcodes.com/docs/columns/.
And here are the results in an Editor widget, note that I have auto-paragraphs disabled, that’s a requirement for this to work normally.
The main answer though to your question is that there isn’t a stylesheet or inline style block on the page targetting the grid classes you’re using. That’s the reason for them not working.
Hope this helps set you on the right path to solving the problem 🙂