Collection Description Image - Bleed to edge on mobile?

chaduval9
Tourist
5 0 1

Hi All,

By any chance, is there some CSS I could use to get the images I added to my collection descriptions to bleed off the site or get closer to the site edges on mobile? I love how it looks on desktop, but on the mobile site the padding seems to be contained within the description container...

Example URL: https://honorbrand.co/collections/butters

Any help would greatly appreciated!

-Chad

KetanKumar
Shopify Partner
14446 1674 5189

@chaduval9 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

can you please share the issue sreenshot?
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chaduval9
Tourist
5 0 1

Hi 

0 Likes
chaduval9
Tourist
5 0 1

Sorry @KetanKumar , I'm new here and forgot to tag in you in my reply. Thanks again for your help on this!

0 Likes
AnmolK
Shopify Partner
24 0 1

hi

Paste the code Bottom of theme.scss.css

@_media only screen and (max-width: 600px) {
.template-collection .rte--description {

margin: 20px;

}
}

0 Likes
chaduval9
Tourist
5 0 1

Hi @AnmolK - I just added this code and it seemed to break the site and keep it from loading. I played around with different versions of this code and it still isn't creating the results. Any other versions you can suggest?

0 Likes
chaduval9
Tourist
5 0 1

@AnmolK @KetanKumar I was able to figure out how to adjust this. In the theme.scss.liquid file I just adjusted the following code:

/*================ RTE collection description ================*/
.rte--description {
font-size: em(17px);
margin: 30px 40px 30px;
text-align: center;

ol,
ul {
list-style-position: inside;
margin-left: 0;
}
}

I just played with the margin numbers until I got it to where I liked it. Thanks!

0 Likes