Solved

How can I align text on mobile view?

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

Accepted Solutions (2)
Ninthony
Shopify Partner
2329 350 1023

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 😄

View solution in original post

Ninthony
Shopify Partner
2329 350 1023

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 😄

View solution in original post

Replies 10 (10)

Ninthony
Shopify Partner
2329 350 1023

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 😄
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. 

Ninthony
Shopify Partner
2329 350 1023

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 😄
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! 🙂

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

Ninthony
Shopify Partner
2329 350 1023

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 😄
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

 

Ninthony
Shopify Partner
2329 350 1023

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

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

Ninthony
Shopify Partner
2329 350 1023

No problem, glad it helped.

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 😄