baileyeidahl Posted November 9, 2021 Share Posted November 9, 2021 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! Link to comment
Wolfsilon Posted November 9, 2021 Share Posted November 9, 2021 (edited) 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 November 9, 2021 by Wolfsilon Link to comment
Wolfsilon Posted November 9, 2021 Share Posted November 9, 2021 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. Link to comment
baileyeidahl Posted November 10, 2021 Author Share Posted November 10, 2021 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.... Link to comment
tuanphan Posted November 12, 2021 Share Posted November 12, 2021 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment