Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress From Bootstrap to WordPress Create Bootstrap Styled Theme Templates Creating a Grid with Shortcodes

Is there a way to make the shortcode grids responsive to stack vertically like widgets?

Is there a way to make the shortcode grids responsive to stack vertically like widgets as the browser width changes?

3 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Wouldn't this just be a matter of CSS?

Gleb Vorobjev
Gleb Vorobjev
13,704 Points

Bootstrap ought to be inherently responsive. Try switching the class on the columns to "col-sm-3" and see if columns stack. The columns in the video were given the class "col-xs-3" which means that they will maintain a width of 1/4 of their container at ALL screen sizes, even if they become too small to fit their content nicely.

I think the moral of the story is that using just the "col-xs-3" class is not practical to display text at small screen sizes. A combination of classes like "col-sm-3 col-xs-6" works a bit better.

As silly as this sounds until I came across this question when my columns heights were not lining up, I did not realize the real power of these short codes.

They accept every class bootstrap has to offer as well as you being able to add your own classes to them for unique stying at the point of entry in the Admin Area!

The only reason im posting this is for other to see and harness the power of bootstrap right there in the shortcode :)

Zac, right you are. It's a simple media query fix. Shoutout to Guil Hernandez -- told me all about it. Thanks Zac!