Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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>
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.
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.
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.
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.
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! 🙂
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.
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>
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?
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.
Thank you so much! It worked seamlessly! Wishing you a great weekend ahead!
No problem, glad it helped.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024