How to optimise the text for my mobile site

Solved
Highlighted
Tourist
11 0 1

Hi guys,

I made some changes to my blog posts on PC and they look fine.

However, when I tried to view it on my mobile I realised the spacing looks very strange.

If you take a look at http://www.alphabetvitamins.com on your mobile you will see that some words don't have enough space to fit on a new line and so instead just start on a new line or paragraph.

However Shopify does not give one the option to edit the post on mobile only.

 

Any suggestions would be much appreciated, thanks

0 Likes
Highlighted
Tourist
9 1 2

Hi there, I can help you, and trust me, I know how it feels. Anyway it's a code problem that can be fixed in a matter of seconds, but I can't understand where is the problem could you screenshot and highlight please? thank you

0 Likes
Highlighted
Tourist
11 0 1

Thanks for getting back to me

 

E7F98DB3-FAC3-4934-BF67-9950C0519424.png

8BB29D4A-39E2-467A-8F26-621E60A209B2.png

  these are just two examples, but this occurs throughout the text.

Can you see how it looks completely different on the desktop version, everything is evenly spaced out, how can I reflect this in the mobile app?

Many thanks

0 Likes
Highlighted
Tourist
9 1 2

Hi there,

1 - First of all, your body text size is set to 14px the minimum recommended is 16px.
 - Unless you want it that way?

2 - The reason your text has too much space between is that you're using too many <p> which stands for "paragraphs".

For example:

*Wrong Code*

<p>Hi there, my name is</p>
<p>Mark and was nice to meet you</p>

*Good Code*

<p>Hi there, my name is Mark and was nice to meet you</p>

3 - How to fix it? you need to delete the <p> and add the entire text on a single one <p>
Attaching your code, so you can see what I'm talking about!

Amount of <p> you haveAmount of <p> you have


 

 

 

 

 

 

 

1 Like
Highlighted
Tourist
9 1 2

Also, can you share screenshots, where you're editing these texts?

0 Likes
Highlighted
Tourist
11 0 1

Thanks for the response Mike.

The reason for this is because it is a lot of information; by adding the spaces between the line makes it easier to read rather than one big chunk.
Is there another way to get around it?

I will change the font size.

0 Likes
Highlighted
Tourist
11 0 1

I see what you are talking about however, which folder will I find this?

0 Likes
Highlighted
Tourist
9 1 2

This is an accepted solution.

Great! if you don't want that to happen here's the solution:
- You can see I only used 1 <p> to start and </p> to close it.
- if you need space between the paragraphs don't add more <p></p> just use this <br> where you need the space.

<br> Stands for single line break, you can even use more than one. and you don't need to close it like this </br> just this <br>

<p>Fusce quis nisl et eros elementum mattis. Ut porta orci sit amet lorem facilisis ornare. Etiam consequat, erat id sagittis aliquam, odio tortor tempus dolor, ut rutrum lectus risus nec eros. Pellentesque vel lorem augue. Maecenas porttitor malesuada ornare. Vestibulum sodales iaculis nisl nec facilisis. 
<br>
Donec facilisis pulvinar elit, eu ultrices nisi consequat ut. Sed eleifend enim id urna sollicitudin, a semper tortor consequat. Ut vel pharetra risus, vel faucibus orci. Vestibulum nibh leo, rutrum eu mattis nec, mollis in sem
</p>

 

1 Like
Highlighted
Tourist
9 1 2

how do you add the information? on your blog

0 Likes
Highlighted
Tourist
11 0 1

Hi, 

I just edit the post on the blog section of my admin.

Which folder will I find the code of the blog?

My blog liquid is empty, is this the wrong section?Screen Shot 2020-11-15 at 16.08.06.png

0 Likes