Overlapping mobile friendly version

[wanderandstrive]

Dear all,

 

we are currently facing some issues with our mobile friendly version. As you can see on the picture attached, our headlines are overlapping the pictures when using the mobile version of our homepage. As we did not change anything in our header, we are not quite sure what´s wrong there.

Can you please just advise

 

Thanks a lot

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Sorry for late reply.

I check your site it now only can access your homepage other page now display error message “Internal Server Error” please check and let us know when your site ok.

Thanks

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

[wanderandstrive]

Hey sorry for that, it now should work 🙂

[Harry]

Please add below code to fix

@media only screen and (min-width: 767px) {
.woocommerce .product-category h2 {
	font-size: 15px!Important;
	top: -15px;
}
.products .jas-col-xs-12:nth-child(2n) .product-category h2 {
	left: 5px;
}
.product-category h2::before, .product-category h3::before {
	top: 20px;
	left: 0;
	font-size: 10px;
}
.product-category h2::after, .product-category h3::after {
	content: '\f178';
	top: 20px;
	left: 60px;
	font-size: 10px;
}}

Best regards

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

[wanderandstrive]

Hey,

we just tried adding your code to it, but nothing changed at all.. Can you please check again? By the way, we are not quite sure why it changed, because we did not change anything in the code , and it worked properly in the past. But somebow from one to another day, it looked like the attachment we send you earlier

 

Thanks a lot

[Harry]

Hi,

Please change prev code to

@media only screen and (min-width: 767px) {
.woocommerce .product-category h2.woocommerce-loop-category__title {
	font-size: 15px!Important;
	top: -15px;
}
.products .jas-col-xs-12:nth-child(2n) .product-category h2 {
	left: 5px;
}
.product-category h2::before, .product-category h3::before {
	top: 20px;
	left: 0;
	font-size: 10px;
}
.product-category h2::after, .product-category h3::after {
	content: '\f178';
	top: 20px;
	left: 60px;
	font-size: 10px;
}}

I’m not sure which cause the issue but i saw you add so much !important (not recommend) use only

Best regards

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

[wanderandstrive]

Hey,

thanks for getting back to us. Unfortunately, nothing changed either when applying the new code. But when we changed the font size of that code, the desktop version adjusted but not the mobile one.

Can you just maybe change it for us? We already gave you the login data, so maybe this would be the best?

We are not quite sure what we are doing wrong.

 

Best wishes

 

[Harry]

Hi,

Please clear cache and check again.

I saw the code applied on your site.

Best regards

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

[wanderandstrive]

Hey,

 

thanks a lot. Now it works properly.

 

Have a great day

[Author]

Posts