CSS Zoom not working on Firefox

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! 

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

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.

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....

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.