Blocks overlay each other on small screen, how do I fix this?

Permalink
**Problem Solved!**
***I just had to re-insert the blocks after applying the bootstrap grid system!***

Hi!

I am having a problem with the responsiveness of my site (building my own template from scratch).

When decreasing the side of the site, my blocks float over each other. I am new to concrete5, I am only used to bootstrap's properties, where block jump under each other on small screen sizes. How do I do this in concrete5?

I attached screenshots of my problem.

My code is simple:

<div class="welcome">
<?php
$a = new Area('Welcome');
$a->enableGridContainer();
$a->display($c);
?>
</div>

I then in edit mode made three containers, added a text block to each and an image.

Any ideas on how could I make the blocks float under each other on smaller screens?

2 Attachments

 
hutman replied on at Permalink Reply
hutman
When you setup your layout, did the Grid dropdown say "Bootstrap 3" or did it just say "Free-Form Layout"?

If it said "Free Form Layout" you probably have to adjust your page_theme.php to tell it that you want to use bootstrap 3 on your site.
monikac replied on at Permalink Reply
Thanks for your reply, yeah, the blocks have bootstrap 3 properties, still not working. However, when I deleted the blocks and replaced them with new ones, they worked how they were supposed to. :)
tallacman replied on at Permalink Reply
tallacman
do you have a public URL where this is occurring?