Support » Plugin: Advanced Bootstrap Blocks » Problem with responsive grid

  • Resolved giammo

    (@giammo)


    Hello,

    I am using the “Advanced Bootstrap Blocks” and I must say that it is truly fantastic.

    I’m having a small problem: when I create a row with multiple columns inside and use multiple “col” classes, the classes for smartphones are not respected.

    I’ll put part of the code below where I find the problem.

    
    <div class="wp-block-advanced-bootstrap-blocks-row row">
        <!-- wp:advanced-bootstrap-blocks/column {"className":"col-12"} -->
        <div class="wp-block-advanced-bootstrap-blocks-column col-12 col">
    		some other code
        </div>
        <!-- /wp:advanced-bootstrap-blocks/column -->
    
        <!-- wp:advanced-bootstrap-blocks/column {"className":"col-md-4 col-sm-12 mb-5 pb-5 fadeIn"} -->
        <div class="wp-block-advanced-bootstrap-blocks-column col-md-4 col-sm-12 mb-5 pb-5 fadeIn col">
    		some other code
        </div>
        <!-- /wp:advanced-bootstrap-blocks/column -->
    
        <!-- wp:advanced-bootstrap-blocks/column {"className":"col-md-4 col-sm-12 mb-5 pb-5 fadeIn"} -->
        <div class="wp-block-advanced-bootstrap-blocks-column col-md-4 col-sm-12 mb-5 pb-5 fadeIn col">
    		some other code
        </div>
        <!-- /wp:advanced-bootstrap-blocks/column -->
    
        <!-- wp:advanced-bootstrap-blocks/column {"className":"col-md-4 col-sm-12 mb-5 pb-5 fadeIn"} -->
        <div class="wp-block-advanced-bootstrap-blocks-column col-md-4 col-sm-12 mb-5 pb-5 fadeIn col">
    		some other code
        </div>
        <!-- /wp:advanced-bootstrap-blocks/column -->
    
        <!-- wp:advanced-bootstrap-blocks/column {"className":"col-md-4 col-sm-12 mb-5 pb-5 fadeIn"} -->
        <div class="wp-block-advanced-bootstrap-blocks-column col-md-4 col-sm-12 mb-5 pb-5 fadeIn col">
    		some other code
        </div>
        <!-- /wp:advanced-bootstrap-blocks/column -->
    
        <!-- wp:advanced-bootstrap-blocks/column {"className":"col-md-4 col-sm-12 mb-5 pb-5 fadeIn"} -->
        <div class="wp-block-advanced-bootstrap-blocks-column col-md-4 col-sm-12 mb-5 pb-5 fadeIn col">
    		some other code
        </div>
        <!-- /wp:advanced-bootstrap-blocks/column -->
    
        <!-- wp:advanced-bootstrap-blocks/column {"className":"col-md-4 col-sm-12 mb-5 pb-5 fadeIn"} -->
        <div class="wp-block-advanced-bootstrap-blocks-column col-md-4 col-sm-12 mb-5 pb-5 fadeIn col">
    		some other code
        </div>
        <!-- /wp:advanced-bootstrap-blocks/column -->
    
        <!-- /wp:advanced-bootstrap-blocks/column -->
    </div>
    

    Working on the html I noticed that eliminating the final class “col” I solve the problem.

    Can you tell me where I’m wrong?
    Thank you

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author helpful.dev

    (@helpfuldev)

    Hi Gian, thank you for the feedback .

    If I understand correctly, you need each of these columns to be full-width on mobile?

    If so, try adding the .col-12 class (and remove the .col-sm-12 class, which is no longer needed) from each of these blocks. Here’s a preview of the result:
    https://www.advancedbootstrapblocks.com/mobile-column-test/

    Note: when using this plugin, the .col class is applied to all “Column” blocks by default so you don’t need to add it again.

    The .col class makes each column into a *flexible* column on all screen-sizes, which will grow or shrink depending on the width of it’s contents. Adding the .col-12 class forces this block into a full-width column on all screen resolutions–the Bootstrap 3 equivalent is the .col-xs-12 class. You can then adjust the column size for larger screen sizes by adding additional column classes: col-sm-6 col-md-4 col-lg-3, etc.

    Please let me know if there’s anything I clarify here, or if you run into any issues in the future.

    Cheers,
    Joe

    Thread Starter giammo

    (@giammo)

    Hi Joe,
    Thanks for your fast reply.

    Yes, I want columns to be full-width on mobile.
    I followed your advice: i have add the .col-12 class (and remove the .col-sm-12) and now work great!

    I’m very gratefull for your work.
    Thanks a lot.

    Best Regard.
    Gian Marco

    Plugin Author helpful.dev

    (@helpfuldev)

    Happy to help, @giammo. Be well!

    Joe

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problem with responsive grid’ is closed to new replies.