Forums

Bootstrap & Responsive Blocktype "Layout"

Permalink 1 user found helpful
Hello,

I need help to make my c5 layout responsive with bootstrap.
It almost works, but if I insert a blocktype "Layout" with columns, the responsive design doesn't work.
The Files are attached.

Can anybody say me what I have to change, where and in which file?
This is the adress to my website:http://infomerkblatt.ch.verus.ch-meta.net/...

Thank you

1 Attachment

Gpower
 
mesuva replied on at Permalink Best Answer Reply
mesuva
You'll need to add to the theme's CSS some extra rules to target the columns the layout tool creates.

In particular you'd need to target the classes
.ccm-layout-col
and
.ccm-layout-col-spacing

and target them for different breakpoints to stop floating and make them 100% width (or whatever you need)

So you'd perhaps do something like
@media only screen and (max-width:767px) {
    .ccm-layout-col {
        width: 100% !important;
        float: none !important;
    }
    .ccm-layout-col-spacing{
        margin:0 !important;
    }
}

(I hate using !important to force styling, but I think in this case you need to use it as the styles are added inline)

You'd need to either edit the theme and put this into the css somewhere, or adjust your header.php element and include another stylesheet for these additions. The above is just an example, you'd probably need to adjust it a bit more, but I've use something similar on countless sites, so you can definitely wrangle the columns to be responsive.
Gpower replied on at Permalink Reply
Gpower
Hello,

Thank you so much. You have solved my problem immediately. You wrote a well-documented solution proposal. Now i can start build the website. Whish you a successful week.