CODEWITHSUNDEEP
htmljquerycssbulma
Firdaus Indradhirmaya
Firdaus Indradhirmaya

Reputation: 314

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

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

Upvotes: 1

Views: 131

Answers (1)

Firdaus Indradhirmaya
Firdaus Indradhirmaya

Reputation: 314

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');
    });

Upvotes: 1

Related Questions