How to trigger column responsiveness when you change container width property?

Question

So i am making a template generator app where user can customize their own template. One of the feature is to be able to see what their website looks like in other devices (tablet and mobile) even while on their desktop. I am able to change the width of the template to their respective device width but unable to trigger column responsiveness in mobile and table width.

So in desktop width, there should be 3 column in a row, while in mobile and tablet there should only be one column per row. Even though i already change the width of the wrapper, the column won't stack.

Simplified HTML file

<span id = "desktop-resolution" class="icon has-text-black has-cursor">
    <i class="material-icons md-24">desktop_windows</i>
</span>
<span id = "tablet-resolution" class="icon has-text-black has-cursor">
    <i class="material-icons md-24">tablet</i>
</span>
<span id = "phone-resolution" class="icon has-text-black has-cursor">
    <i class="material-icons md-24">phone_iphone</i>
</span>
<div class="container-wrapper">
    <div class="resolution-wrapper center-item">
        <section class="section">
            <div class="container">
                <div class="columns">
                    <div class="column">Card Content</div>
                    <div class="column">Card Content</div>
                    <div class="column">Card Content</div>
                </div>
            </div>
        </section>
    </div>
</div>

Javascript (jquery)

$('#desktop-resolution').click(function() {
    var width = $('.container-wrapper').width();
    $('.resolution-wrapper').width(width);
});

$('#tablet-resolution').click(function() {
    $('.resolution-wrapper').width(768);
});

$('#phone-resolution').click(function() {
    $('.resolution-wrapper').width(375);
});

I am using Bulma CSS framework. I think the problem is bulma uses media query and media query looks at the overall screen size and not the wrapper to trigger responsive property. Any tips or pointer on how to solve this?

An example of how the feature should work : https://themes.getbootstrap.com/preview/?theme_id=47394

media query works on device width, not on container's width. Here you are changing the width of your container So this is not an issue of Bulma framework. You can achieve the same thing as in your attached example by using iframe. May be, This answer will help you. — Kumar Gaurav
– Kumar Gaurav, Commented May 17, 2020 at 11:04

Firdaus Indradhirmaya · Accepted Answer · 2020-05-17 13:20:42Z

What i did was actually just add the is-multiline to the columns class and add is-full to the column class when the container width was mobile, and remove them when the container width was desktop and tablet.

Before (JS)

    $('#desktop-resolution').click(function() {
        var width = $('.container-wrapper').width();
        $('.resolution-wrapper').width(width);
    });

    $('#tablet-resolution').click(function() {
        $('.resolution-wrapper').width(768);
    });

    $('#phone-resolution').click(function() {
        $('.resolution-wrapper').width(375);
    });

After (JS)

    $('#desktop-resolution').click(function() {
        var width = $('.container-wrapper').width();
        $('.resolution-wrapper').width(width);
        $('#product-column').removeClass('is-multiline');
        $('#product-column > div').removeClass('is-full');
    });

    $('#tablet-resolution').click(function() {
        $('.resolution-wrapper').width(768);
        $('#product-column').removeClass('is-multiline');
        $('#product-column > div').removeClass('is-full');
    });

    $('#phone-resolution').click(function() {
        $('.resolution-wrapper').width(375);
        $('#product-column').addClass('is-multiline');
        $('#product-column > div').addClass('is-full');
    });

Collectives™ on Stack Overflow

How to trigger column responsiveness when you change container width property?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related