Problem with responsive grid

  • Resolved giammo

    (@giammo)


    4 years, 8 months ago

    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

    (@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

    (@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.

Tags