- This topic has 12 replies, 2 voices, and was last updated 5 years, 5 months ago by Andrew Misplon.
- AuthorPosts
- April 30, 2019 at 3:17 pm #12577
Focused EnergyParticipantHi 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>April 30, 2019 at 3:19 pm #12578
Andrew MisplonKeymasterHi 🙂
Do you know what plugin is supplying the styles for this grid?
April 30, 2019 at 3:21 pm #12579
Andrew MisplonKeymasterIf 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.
April 30, 2019 at 3:22 pm #12580
Focused EnergyParticipantI’m using Site Origin Editor which I think may be interfering with the code
April 30, 2019 at 3:24 pm #12581
Focused EnergyParticipantI am using a Bootstrap plugin
April 30, 2019 at 3:25 pm #12582
Andrew MisplonKeymasterThemes won’t necessarily add support for the class names
container
,row
andcolumn
. 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 forcontainer
,row
andcolumn
. 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 🙂April 30, 2019 at 3:27 pm #12583
Andrew MisplonKeymasterWe 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.
April 30, 2019 at 3:36 pm #12584
Andrew MisplonKeymasterThanks for the link. Please, can you check the link from another browser or in private browsing mode? For me, it goes to 404.
April 30, 2019 at 3:37 pm #12585
Andrew MisplonKeymasterIf 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.
April 30, 2019 at 3:39 pm #12586
Focused EnergyParticipantThis reply has been marked as private.April 30, 2019 at 3:40 pm #12587
Andrew MisplonKeymasterThanks, 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.
April 30, 2019 at 3:41 pm #12588
Andrew MisplonKeymasterHere is how that looks in the inspector: https://imgur.com/a/kJZNS3v. There aren’t any rules targetting those classes at the moment.
April 30, 2019 at 4:00 pm #12589
Andrew MisplonKeymasterI 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 🙂
- AuthorPosts
You must be logged in to reply to this topic.