Jump to content

CSS Zoom not working on Firefox

Recommended Posts

Site URL: https://www.weddingcult.squarespace.com

Hello,

site password: weddingcult
I am using code to add an icon before and after the text for the buttons on the website. As you can see in the Screen shot - the star and the arrow. 

I used the zoom css feature to scale the icons but it is not working in Firefox. I also just tried to save the icons at a smaller size but then they show up blurry.

Here is the example of code I am using for one of the arrows:

 

.sqs-block-button-element--small:after {
  content: url(https://static1.squarespace.com/static/6164a3ef2478ba6fa5c6ac27/t/616545756588ab7638d3b270/1634026869189/wc-arrow-white.png)!important;
  position: relative;
  zoom: 40% !important;
  top: 10px !important;
  right: -40px !important;
}

 

I've already tried these webkits but they don't work.

 

zoom: 0.4;
-ms-zoom: 0.4;
-webkit-zoom: 0.4;
-moz-transform:  scale(0.4,0.4);
-moz-transform-origin: left center;

 

 

Any help is greatly appreciated! 

Screen Shot 2021-11-09 at 4.17.03 PM.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Your website isn't working on my end and does not have a valid SSL certificate. I usually attempt to view websites on a Virtual Machine so no problem, but it's just a long white page with a custom font. Are you deploying this website on the Developer platform?

You should only need to use new standard --- "transform: scale(_VALUE_);" -- on Mozilla Firefox. Zoom is a depreciated property that won't work for all users and shouldn't be used in product front end at all. You can read more about this here.

 

Best,

Dan

Edited by Wolfsilon
Link to comment
YOUR_BLOCK_ID {
  .sqs-block-button-element--(YOUR_SIZE_){
    position: relative;
    height: auto;
    width: 300px;
    
  }
.sqs-block-button-element:before  {
  content: '';
    position: absolute;
    top: 0;
    left: 0;
  	right: 0;
  	bottom: 0;
    width: 100px;
    height:auto;
    background-image: url(https://static1.squarespace.com/static/6164a3ef2478ba6fa5c6ac27/t/618a931bb620f002f2075578/1636471579050/Star-2-%281%29.png);
  }
  .sqs-block-button-element:after  {
  content: '';
	position: absolute;
	top: 0%;
  	right: 0%;
   	bottom: 0;
    width: 100px;
    height:auto;
    transform: scale(.5);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    background-image: url(https://static1.squarespace.com/static/6164a3ef2478ba6fa5c6ac27/t/616545756588ab7638d3b270/1634026869189/wc-arrow-white.png);
  }
}

This is the closest I could come to getting something like this for you. The issue with your icons is that you're not using optimized image formats so adjusting them in CSS will almost always result in poorer quality images. You're better off using SVG files in the future or downloading some arrows from a SVG icon library.

I'm using the default button in my example so don't mind the border but yeah, hopefully this at least gives you a reference on how to format your code.

Screen Shot 2021-11-09 at 4.19.06 PM.png

Link to comment
On 11/10/2021 at 6:59 PM, baileyeidahl said:

Thank you so much! I was able to make this work! 

I just wanted to note that I tried to upload SVG to the files section in css but it wouldn't work....

If you use Trial Plan, sometime upload files won't work.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.