ginnyd Posted October 29, 2021 Share Posted October 29, 2021 Site URL: http://ginnydi.com I'm using this code to change "Sale" to "Pre-Order": .product-mark.sale { font-size: 0; } .product-mark.sale:before { font-size: 15px; content: "Pre-Order"; } It's working mostly as intended, but for some reason it made the actual rectangle of the "flag" behind the text much narrower. You can see it on this test page, but I've also attached a screenshot of it for posterity. You can see that compared to the "Sold Out" flag to the right, the flag is much thinner. How can I fix this? Link to comment
Solution paul2009 Posted October 30, 2021 Solution Share Posted October 30, 2021 The code is just slightly oversimplified. If you add a line height it should be fine. For example, here's the second part of the code, with this added: .product-mark.sale:before { font-size: 15px; content: "Pre-Order"; line-height: 1em; } If this post has helped you, please click a 'Like' or 'Thanks' icon below ⬇️ ginnyd 1 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
ginnyd Posted October 30, 2021 Author Share Posted October 30, 2021 1 hour ago, paul2009 said: The code is just slightly oversimplified. If you add a line height it should be fine. For example, here's the second part of the code, with this added: .product-mark.sale:before { font-size: 15px; content: "Pre-Order"; line-height: 1em; } If this post has helped you, please click a 'Like' or 'Thanks' icon below ⬇️ That fixed it perfectly!! Thank you so much! paul2009 1 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