page is not responsive

On this page, I have used bootstrap to make it responsive.
Eg. In the header
<div class="cta-holder col-12 col-sm-5"> (Microsoft Azure training section)
and in the testimonials also
<div class="client-testimonials col-12 col-md-6">
But this page is not responsive at small widths.
Somehow col-md-* overrides the col-*

Please suggest

  • Adam Czajczyk

    Hello Sonam

    I hope you're well today and thank you for your question!

    I have visited homepage of the site that you assigned to this ticket and checked it with Chrome's responsive view. It looks like the entire page scales quite nice down to around 250px width for me.

    I'm not sure, however, at what exactly should I be looking. Is it that "orange(ish)" "Microsoft Azure Training" box with a button or the entire header?

    Would you please share some screenshots of the section in question with me, showing the issue? That would help a lot and I'll be happy to assist you further with this.

    Kind regards,
    Adam

  • Sonam

    Hello Adam

    Thanks for your reply.
    I can not share any screenshots because I am not able to achieve what I wish to do.
    Yes, I am talking about "orange(ish)" "Microsoft Azure Training" box with a button.
    Bootstrap classes which I have assigned to this div are <div class="cta-holder col-12 col-sm-5">
    For width < 576px, Microsoft Azure Training should take full 12 columns. But that is not happening.
    See the col-sm-5 is overriding the styles for col-12 (https://imgur.com/a/A9i9LDV)

  • Adam Czajczyk

    Hello Sonam

    Thank you for your response and additional explanation.

    I must say I'm not sure how exactly the theme is processing/applying the CSS as the rules are actually in SCSS. Ideally, SCSS should be used during "development stage" and then compiled to CSS for end-use rather than "live processed" on the site but this approach is used less and less often nowadays. But it makes things a bit more complex and if there's no "built-in tool" for editing this (or explicitly setting different class for a given element) a trick might come in handy:

    @media screen and (min-width:576px) {
    	.col-12 {
    		-webkit-box-flex:0!important;
    		-ms-flex:0 0 100%!important;
    		flex:0 0 100%!important;
    		max-width:100%!important;
    	}
    }

    This is not something I'd usually suggest but if nothing else works, it's worth giving a try. This is in fact the exact col-12 style copied, enclosed in a regular CSS media query and marked with "!important" flags that should "force-override". When tested in browser, that seems to work. This is for that "Microsoft Azure Training" box but the same approach should work in other cases.

    Give it a try please and let's see if it helps. To apply it to the site, please add it either via "Appearance -> Customize -> Additional CSS" or via theme's "custom css" option if there is such option. Just make sure that you add it at the very end of any existing code there (if there is any) and clear all caches on site after adding it.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.