Return to previous page

Zoom CSS not working for Firefox - by Martin

This topic has 7 replies, 3 voices, and was last updated 4 years, 6 months ago ago by Olga Barlow

Martin

Participant

June 3, 2020 at 22:03

Hi, in my homepage the “Banner with mask” item has a css issue in Firefox.

The following code seems to don´t take affect in this browser, so the text (in mobile) gets HUDGE and out of the box:

@media only screen and (max-width: 1500px) and (min-width: 650px)
.banner.responsive-fonts .banner-content .content-inner > p {
zoom: .75;
}

#239804 Copied Theme version: 6.3.5 WooCommerce version: Lastone

6 Answers
Rose Tyler

Support staff

June 4, 2020 at 07:56
Hello,

Add this code in Theme Options > Theme custom CSS > Global custom CSS:
```
@media only screen and (max-width: 1500px) and (min-width: 650px){
	.banner.responsive-fonts .banner-content .content-inner > p {
		-moz-transform: scale(0.75);
	}
}
```
Regards
#239837 Copied
Martin

Participant

June 4, 2020 at 17:33

Thaks for your response,

but it did not work. In Firefox y still see the same issue, hudge texts.

You can check it by using Firefox mobile in hompage ( https://pic-canto.com/ )

#239941 Copied

Martin

Participant

June 4, 2020 at 19:26

Finally i solved with this code because even using the correct Scale property of Mozilla the .banner-head item and banner-content-bottom become very separated.

@media only screen and (max-width: 767px) {
.banner.responsive-fonts .banner-content .content-inner > p {
zoom: 1;
}
}

.banner.responsive-fonts .banner-content .content-inner > p {
margin-bottom: 25px;
}

@media only screen and (max-width: 500px) {
.banner-head {font-size: 28px !important;}
.banner-content-bottom {font-size: 24px !important; }
}

@media only screen and (max-width: 500px) {
.banner-head {margin-bottom: 30px !important;
margin-top: 20px}
.banner-content-bottom {margin-bottom: 30px !important; }
}

#239955 Copied

Olga Barlow

Support staff

June 4, 2020 at 19:47

Hello,

I added code http://prntscr.com/stw4s3 , cleared the cache and it works.

Regards

#239956 Copied

Martin

Participant

June 6, 2020 at 17:25

Thank you. I had added same code but in the native Custom CSS of wordpress. Is there any difference from native custom css at the end of the customizer and the Xstore custom css zone?

#240119 Copied

Olga Barlow

Support staff

June 7, 2020 at 14:25

Hello,

No, actually both offer the same. But the default one will be the even if you switch theme, XStore Custom CSS will be available only when our theme is enabled.

Regards

#240154 Copied
Viewing 7 results - 1 through 7 (of 7 total)