Banner Mobile Display Issue

Hi @4familyes
Surely this is the mobile responsive issue. By applying some CSS this can be fixed. But on which page does this banner live actually? I can’t see this banner on your homepage.
Your given preview link won’t work without login.

Without having the page live with this banner, no way to find out the CSS code that will solve the issue.

Could you please give a page link where this banner is live?

Regards

Hi @4familyes It seems you didn’t write any css or set any style from the page builder for mobile device. It will be great if you can add here specific page url where the banner is not showing correctly.

Thanks

Hi guys,

Sorry, here is the live version of the homepage with the banner.

https://4familyes.com/home-4familyes-19-07-2022/

Thanks for your help,

JD

Hello @4familyes ,
Your site has built with Visual Composer page builder. So much inline CSS is in the source code which is not good for optimization.
Anyway, I have written some CSS which will make looks good your typography in smaller devices. The overall Background image will be good.
But my suggestion will be to use a dark overlay over the background image so your white text visibility will be more clear.

Here is the code

@media all and (max-width:640px){
.vc_general.vc_cta3 {
    padding: 28px 15px;
}
.vc_cta3-content h1 {
    font-size: 24px;
}

header.vc_cta3-content-header h2 {
    line-height: 30px !important;
}
}

To add custom CSS code:
1. Go to your site’s dashboard.
2. On the left sidebar, click on Appearance -> Additional CSS.
3. Paste the code and click on the Save Changes button.

Hi there,

The CSS worked and the banner is displayed fairly well on Mobile! Thank you for your help!

JD

@4familyes Sounds good to hear, it was helpful for you. You are most welcome.