Description in Collection is too wide

Solved
Highlighted
Tourist
32 0 0

Hi there, how do I make the width of the description smaller? Also happening on the about page. Using Debut theme. 

 

https://good-thingsstore.myshopify.com/admin/themes/80652435531/editor#/collections/bath/products/be...

 

Password is aiweir

 

 

Screen Shot 2020-04-10 at 1.35.21 pm.png

0 Likes

This is an accepted solution.

Hello ,

For about page :

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.rte {
    width: 750px !important;
    padding-left: 15% !important;
    text-align: justify !important;
}

 Please share the link of the page from where you take a screenshot.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
32 0 0

Thank you! Here is the link for the collection page. I will need this width applied for all pages :)

 

https://good-thingsstore.myshopify.com/admin/themes/80652435531/editor#/collections/bath/products/be...

0 Likes
Highlighted
Tourist
32 0 0

I've found that code has been applied to all pages, however on the collection it is centres but on about it is off centre. How can I fix this?

 


@oscprofessional wrote:

Hello ,

For about page :

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.rte {
    width: 750px !important;
    padding-left: 15% !important;
    text-align: justify !important;
}

 Please share the link of the page from where you take a screenshot.


 

0 Likes
Highlighted
Tourist
32 0 0

It has also affected the description in my product page

Screen Shot 2020-04-10 at 2.09.35 pm.png

0 Likes
Highlighted

Hello ,

For all collection pages :

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-collection-template .rte {
    width: 800px !important;
    padding-left: 20% !important;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

This is an accepted solution.

Ok.

For about page replace that css with :

.medium-up--five-sixths .rte {
    width: 750px !important;
    padding-left: 15% !important;
    text-align: justify !important;

}

This will not affect your product page.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
32 0 0

Thank you so much! You're a god sent. That's fixed everything. 

 

I don't suppose you know if you can add a side navigation bar in collections on my Debut theme do you? Wanting something like the below.

Screen Shot 2020-04-10 at 2.32.45 pm.png

0 Likes
Highlighted
Tourist
32 0 0

I've just an issue with the code above. It has affected my mobile site. Mobile site was fine prior to adding this code. Please see photo. 

Screen Shot 2020-04-10 at 2.35.01 pm.png

 

 

0 Likes
Highlighted

Ok.

Replace that css with:

@media only screen and(min-width:769px){
#shopify-section-collection-template .rte {
    width: 800px !important;
    padding-left: 20% !important;
}
}

So it will not affect in mobile view.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes