Text does not look right on mobile, is fine on Desktop

Technical Q&A
1

I bought the Theme through Shopify “Sunrise”. The text looks really weird on the mobile site. The desktop looks great!

On my collections list page, the words are broken. An example would be “Belts/Suspe” (Shows on the first row) then “nders” shows under it in the second row. It should be “Belts/Suspenders”

In the Product Grid, it can show up to 7 lines, with maybe one word on each line. Example: WWII (First Line) Thompson (Second Line) 3 Cell (Third Line) Ammuniti (Fourth Line) on Pouch (Fifth Line) Reproduct (Sixth Line) ion (seventh Line). As you can see the word Ammunition is broken as well as Reproduction.

How do I get the text to a couple of lines, without the words all being broken up?

Too many lines with broken words. Can anyone help me? Thank you!

2

Hello @PigeonPM ,

Greetings from the Store Watchers Support Team! Happy to help you today.

Can you please provide your store URL (with storefront password if any) so I can check the issue?

Let me know if need further assistance

Regards,
Store Watchers Support Team

3

Hello @PigeonPM

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

4

thebestmilitary4698

Thank you, everything is still a work in progress but getting closer. I also noticed some of my titles are messed up too. It looks like mainly a problem with the text. Thank you, Walter

5

Hello @PigeonPM

Cause: Your title collection writes seamlessly and automatically breaks the line when overflowing, it breaks in the wrong place.

There are 2 options to fix this problem

  • Option 1: Rename for collection list like this “Bags / Packs / Pouches” ( add space in collection title)

  • Option 2: Change collection list one mobile 1 column:

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1678848973055.png
GemPages_0-1678848973055.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1678848992352.png
GemPages_1-1678848992352.png1145×885 64.2 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like
6

Thank you, I will try this in the morning. I will let you know how it works. What about my product items, they are a mess also, some have 7 lines with broken wording.

7

Thank you the collection page is fixed!! But I’m still having problems with my products, especially in the Reproductions category, Wording is still broke, could you please help me with that, I will need to change a lot of my products. Thank you again!

8

Hello @PigeonPM ,

You can add this code according to the instructions above to fix it

Kind & Best regards,
GemPages Support Team

9

Good morning, my collections area is ok now, but my other products through the Shop Now are not looking to good, especially the category Reproductions, the wording text is broke up, plus there is so many lines or wording. Also some of my titles from the sub catergories are not fitting. This is for the mobile only. If I can get fewer lines and get the text to look right would be great. Thank you, Walter

thebestmilitary4698

10

Looks like my titles are ok now also, the only problem is the word Reproduction is not fitting. Also there is a weird pink line showing on some of my collection boxes? Thanks

11

Hello, Everything has been fixed! Thank you

12

Hi @PigeonPM ,

I am so glad that my solution can help.

1 Like
13

I have one more question on the mobile app how do I change the footer links colors, it’s in white now but hard to read I need it black, but only on the mobile, not on the desktop or fullscreen. This is due to my background showing up differently on mobile. Thanks again, you have been a great help to me