Why is my website text off-center on mobile view?

Store Design
1

Hi there,

Am in need for some help with the text on my website on MOBILE VIEW. The body text is centered but why is it appearing on the left side of the screen? How can this be rectified?

The website appears fine on desktop view.

Thank you.

IMG_3842.PNG
IMG_3842.PNG1125Ă—2436 268 KB

2

We’ll need to see this page in our browser, can you post a link?

It looks like the text is in a container that only has 50% of the width of that entire section.

3

Thank you for responding!

https://www.hausofheka.com/collections/sprays

Here is the link and if viewed via Mobile, notice how the text is shifted on the left even though the text itself is aligned in the center.

4

nvm I found it. It looks like for some reason that section has a class of “grid__item” on it – and on your collection pages it has a style specifically set for that class to have a width of 50%. However, that’s probably meant for products so that you can see 2 on the page at a time. Go into collection-template.liquid and look for collection.description and remove the grid__item class and the grid class from the parent elements. Add some other class to the grid__item div and apply some padding and make it’s width 100%. Lets say for instance you called the new class “collection-description”, you could style it like:

.collection-description {
width: 100%;
padding: 0 30px;
}

If you’re having trouble I can request access to your theme and make the change for you.

5

Thank you for offering solutions although, I’m unable to locate the “collection-theme.liquid”…

It would be great if you could make the edits from your end if it’s not too much of a trouble! I would greatly appreciate that! :slightly_smiling_face:

6

Oh, I found this, but you lost me at “remove the grid__item class and the grid class from the parent elements. Add some other class to the grid__item div and apply some padding and make it’s width 100%.”

Not quite sure what I should be removing and/or adding.

Screenshot 2021-09-23 at 11.06.52 PM.png
Screenshot 2021-09-23 at 11.06.52 PM.png2312Ă—1044 455 KB

7

See it says:


  

    
      {{ collection.description }}

Change it to this and add these style tags above it:


  

    
      {{ collection.description }}
8

Amazing! It worked! Thank you so, so much!!!

One more thing if I may ask, how am I able to reduce the size of this font on Mobile View, without it altering the size on Desktop view?

FD0C02EE-4D0E-4B64-9C16-3E6170BC1651.JPG
FD0C02EE-4D0E-4B64-9C16-3E6170BC1651.JPG1125Ă—2000 185 KB

9

Use a media query in the style tags I provided. 767px is generally a good mobile breakpoint. So it would just look like this, I’m just going to repost my old code:


  

    
      {{ collection.description }}

Just change 10px to whatever you want.

10

Thank you so much! It worked seamlessly! Wishing you a great weekend ahead!

11

No problem, glad it helped.