Daniel

Columns are not responsive for mobile devices

4 posts in this topic

Dear Support Staff,

I'm using your plugin really much and like it.

On a mobile device it looks great so far, the only thing I recognized there: Columns are not working that well. For example: I choosed a 2 column layout and on an iPhone Portrait View this layout is still visible (2 columns), but it looks not nice and you can't read the text very good.

How can I get this responsive as well?

I think I have to do something with the class "bt-column col-xs-12 col-sm-6 col-md-6 col-lg-6" ...

EDIT: Maybe I have to add that it seems only to occur in combination with Iconbox tag. Means: First I create 2 columns layout, then within each I added an icon box.

Thank you very much in advance!

Best regards,

Daniel

Edited by Daniel

Share this post


Link to post
Share on other sites

Hi there.

Thanks so much for using our extension.

As you see there are few classes col-xs-12 col-sm-6 ...

These are bootstrap's class for many columns layout base on 12.

col-sm-6 means on small screen size, the column's width is 50%;

For responsive layout, we use col-xs-12 class, it means on mobile phone (very small) the column's width is 100%;

So reason of your problem maybe col-xs-12 is not applied or, your mobile phone is treated as small screen.

With #1, please try to give me your URL, i want to check the problem directly

With #2, please open file /plugins/system/bt_shortcode_system/shortcode/assets/js/bt-generator.js

find this line

var column = $('<div>').addClass('bt-column col-xs-12 col-sm-' + col + ' col-md-' + col + ' col-lg-' + col).attr('data-col', col);

change it to

var column = $('<div>').addClass('bt-column col-xs-12 col-sm-12 col-md-' + col + ' col-lg-' + col).attr('data-col', col);

I hope my reply will help you.

Share this post


Link to post
Share on other sites

Hi tronghm,

I checked it... i saw that there was added the code " col-xs-6 col-sm-6" and not "col-xs-12 col-sm-6". After I corrected it, it worked perfectly. Sorry about my mistake and thank you very much!! :)

Best regards,

Daniel

Share this post


Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now