How can I align text on mobile view?

Solved
Hausofheka
Tourist
6 0 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

0 Likes
Ninthony
Shopify Partner
2240 337 895

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.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Hausofheka
Tourist
6 0 1

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. 

0 Likes
Ninthony
Shopify Partner
2240 337 895

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.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Hausofheka
Tourist
6 0 1

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!

0 Likes
Hausofheka
Tourist
6 0 1

 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

0 Likes
Ninthony
Shopify Partner
2240 337 895

This is an accepted solution.

See it says:

 

<div class="grid">
  </div class="grid__item">
    <div class="rte">
      {{ collection.description }}
    </div>
  </div>
</div>

 

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

<style>
.collection-description {
  width: 100%;
  padding: 30px 0;
}
</style>

<div>
  </div class="collection-description">
    <div class="rte">
      {{ collection.description }}
    </div>
  </div>
</div>

  

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Hausofheka
Tourist
6 0 1

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

 

0 Likes
Ninthony
Shopify Partner
2240 337 895

This is an accepted solution.

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:

<style>
.collection-description {
  width: 100%;
  padding: 30px 0;
}
@media(max-width: 767px){
  .collection-description {
    font-size: 10px;
  }
}
</style>

<div>
  </div class="collection-description">
    <div class="rte">
      {{ collection.description }}
    </div>
  </div>
</div>

 

Just change 10px to whatever you want.

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Hausofheka
Tourist
6 0 1

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