Hero banner not mobile responsive

[DonnaJacky]

Dear,

Last time the hero banner wasn’t mobile responsive and now we add another hero banner, but this one is also not mobile responsive. How can we make it responsive and make sure the next hero banners will be mobile responsive? Thanks!

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Jacky,

The issue because you add padding top and padding bottom of and these value fixed while background cover content and when you view on mobile only the width decrease but the height still the same so you have to add code to decrease the height.

Please add below code to Claue > Theme Option > General layout > Custom CSS

@media only screen and (max-width: 767px) {
.vc_custom_1600637582830 {
	padding-top: 25vh !important;
	padding-bottom: 5vh !important;
}}

We recommend just change the background image. Don’t delete the row wrap hero banner and create new row.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[DonnaJacky]

Hi Harry,

Thank you!

I just added the code, but the hero banner isn’t changing.

[Harry]

Hi Jacky,

Please change code to

@media only screen and (max-width: 767px) {
.vc_row..vc_custom_1600637582830 {
	padding-top: 25vh !important;
	padding-bottom: 5vh !important;
}}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[DonnaJacky]

Dear Harry,

Thank you.

Maybe you can took a look, because it is still not working.

[Harry]

I’m sorry again.

The correct code is

@media only screen and (max-width: 767px) {
.vc_row.vc_custom_1600637582830 {
	padding-top: 25vh !important;
	padding-bottom: 5vh !important;
}}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[DonnaJacky]

Dear Harry,

Sorry to say, but this code isn’t also working ?

[Harry]

Hi Jacky,

Please check the number https://prnt.sc/ulslw5 it different with old code https://prnt.sc/ulsmwz

Please use the new on this topic.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts