Jump to content

How to show consistent font style and size for shop items' titles across desktop and mobile?

Recommended Posts

Site URL: https://www.edxulondon.com/shop

Hi All, I used custom CSS code to make the product title on shop page to split into 2 lines and in 2 different font style and size (by adding "|' between the 1st and 2nd lines, example: 'TEARS EMERALD RING | Gold Vermeil & Rhodium Plated Silver'). On the desktop version it shows perfectly. But on the mobile version, because I am using 2 items per row, there aren't enough space for the 1st line, so some of the words before '|' and should be in 1st line's font and size falls into the second line and follow the 2nd line' font and size. How can I change this and make everything following the desktop version on mobile?

Thank you so much in advance for any advice and help!

 

IMG_8633.PNG

Screenshot 2021-10-07 at 17.01.59.png

Link to comment
On 10/7/2021 at 11:20 PM, Edwardxu said:

Site URL: https://www.edxulondon.com/shop

Hi All, I used custom CSS code to make the product title on shop page to split into 2 lines and in 2 different font style and size (by adding "|' between the 1st and 2nd lines, example: 'TEARS EMERALD RING | Gold Vermeil & Rhodium Plated Silver'). On the desktop version it shows perfectly. But on the mobile version, because I am using 2 items per row, there aren't enough space for the 1st line, so some of the words before '|' and should be in 1st line's font and size falls into the second line and follow the 2nd line' font and size. How can I change this and make everything following the desktop version on mobile?

Thank you so much in advance for any advice and help!

 

IMG_8633.PNG

Screenshot 2021-10-07 at 17.01.59.png

So you used another snippet other than universalFilter to split the title into 2 line after the | character right?

Unfortunately, the code is obfuscated so it can't be edit properly, you may want to contact the author about this

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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.