How can I adjust the width of a collection description?

Store Design
1

Hi guys, I am trying to change the width of the collection description, now it looks a bit weird and out of shape:)

How can I make the text block wider
Store url is https://www.paleopowders.com/collections/collageen-hydrolysaat

Lemonibio_0-1687436430451.png
Lemonibio_0-1687436430451.png1649×463 41.1 KB

Any help is much appreciated:)

1 Like
2

@Lemoni-bio - open this collection in customize settings and check if it has an option to increase the width, else add this css to the end of your theme.css file and check

for now it is for desktop, you can change numbers as per the need

suyash1_0-1687444449198.png
suyash1_0-1687444449198.png1366×768 177 KB

@media screen and (min-width:1023px){
.shopify-section--collection-banner .container{width: 80%;  max-width: 80%;  margin: 0 auto;}
}
3

Hi @Lemoni-bio

It looks like you have an option in your theme to change the width of this block without using the code. Currently, it was set on xs.

You can also adjust this using the code. See instructions below. I also added a justify alignment. Please check the result before using this as a solution

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the theme.css file
  3. At very end of the code, add the code below
.container.container--xs {
    max-width: 80rem;
    width: 100%;
    margin: auto;
    padding: 0 3rem;
}

.collection-description {
    text-align: justify;
}

Result here

made4Uo_0-1687449260290.png
made4Uo_0-1687449260290.png1784×770 191 KB

4

Hi @made4Uo question for you as a non-technical person. In my theme, Prestige 4.1.0 I don’t seem to have atheme.css but I do have a ‘theme.liquid’ file. Additionally, I see there are the following collection specific files within the ‘sections’ folder of files: collection-template.liquid, custom-html.liquid, featured-collections.liquid, featured-product.liquid, and featured-video.liquid. Where should I add the script to adjust the collection description width? I’m having the same issue as @Lemoni-bio . Thank you in advance! :folded_hands:t3:

5

Hi,

You would need a different code. Please provide your website