Classic Headline is not responsive on small devices

[WestsideVirtual]

Website page is https://brandgrowth.com/capabilities.

Headline is not responsive on smallest device.

Desktop size it looks fine:

However on small responsive size it doesn’t look good:

Can you please tell me what I can do ?

Thank you.

[prakash_s]

Hello @WestsideVirtual,

Thanks for writing to us.

I checked your given page URL it seems that it is working fine at my end I checked in the browser responsive mode and I have checked in the phone as well. It might be the browser cache issue at your end. I would suggest you clear your browser cache and then check it again.

Thanks

[WestsideVirtual]

Hi Prakash

Thank you for your reply.

For some reason, the three rows and four columns below the Heading are not responsive. When I tried to fix it by adding class flexmethod (on a hunch, I was not sure what the results would be) the entire section just now is left-justified.

Also the same section is not responsive on mobile device - each cell bleeds in to the column it is part of. Not sure why. I would prefer to see a white border beneath each cell when responsive in the same way that you see a border when it is desktop size.

Can you please help? Thank you in advance!

[prakash_s]

Hello @WestsideVirtual,

In order to help you with your concern, we need to check your settings. I would request you please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[WestsideVirtual]

Thank you Prakash, I have entered the information in the Secure Note.

[prakash_s]

Hello @WestsideVirtual,

Thanks for sharing the credentails. I went ahead and checked your site’s dashboard and it seems that you have added a custom CSS code because of that the columns are not aligning on the center.

Please have a look at the given screenshot below.

If you removed the max-width style from your custom CSS it would work fine.

Hope it helps
Thanks

[WestsideVirtual]

Thank you Prakash, that fixed the centering but the rows and columns are still not responsive.

This is what it looks like on desktop:

There is white space between each blue box.

However on small screen, there is no white space except beneath the LAST blue box of each row.

Not sure why that is happening but I would like white space beneath each blue box.

Thank you again for your patience!

[nabeel]

Hey @WestsideVirtual,

Since you already have a class flexmethod assigned to the Rows, you can simply add the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .flexmethod .x-column {
        margin-bottom: 20px
    }
    .flexmethod .x-column:last-child {
        margin-bottom: 0;
    }
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

[WestsideVirtual]

Thanks Nabeel, I added margin-bottom: 10px; to the style and it worked. Thanks so much for your efforts.

[prakash_s]

Hello @WestsideVirtual,

Glad that we were able to help you. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Thanks

[WestsideVirtual]

Thank you again for your quick and detailed responses. It is much appreciated. You can close this ticket.

[prakash_s]

You are welcome @WestsideVirtual