How can I adjust the length of my collections description on my page?

[MyCity]

Hi, We are trying to edit the length of our collections description. The collections description is currently set to be almost half length of the page.

How is it possible to even it up, so that the length would be throughout the whole page? Above the row of 4 images? Currently its above 2.5 images length. 

Thank you in advance. 

[Made4uo-Ribe · Accepted solution]

Thank you for the information. Im a bit confuse what you'll like the to change the length or the width? I change the width cause I think that is what I understand in your post. 

Try this. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

.collection-hero__description.rte {
    max-width: 100%;
}

Result:

I hope it help.

[Made4uo-Ribe · Accepted solution]

I dont understand the original post you said you like the length of the description up to the 4th images. You like to change it again? On what size for the font?

[Made4uo-Ribe]

Hi @MyCity ,

Would you mind to share your URL wbeiste? with password if its protected. Thanks!

[MyCity]

Can I share a URL privately? 

[Made4uo-Ribe]

Yeah sure. Thanks!

[Made4uo-Ribe · Accepted solution]

Thank you for the information. Im a bit confuse what you'll like the to change the length or the width? I change the width cause I think that is what I understand in your post. 

Try this. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

.collection-hero__description.rte {
    max-width: 100%;
}

Result:

I hope it help.

[MyCity]

Wow, that actually did work. 

It looks better, but not perfect. 

Could you help me more please?

Is it possible to position a collections name in the middle? 

And position description in the middle as well?

Also, I wonder if the description could cover two full pictures and half each on each side? as a width. Does it make sense? 

Thank you in advance. 

Thank you!!! 

[Made4uo-Ribe]

Try this. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

.collection-hero__text-wrapper {
    text-align: center;
}

Result:

I hope it help. 

[MyCity]

Something did not work. The collection name moved to center. The description moved to the left. 

[MyCity]

ah yes, it's in addition, not instead. it worked. thank you. 

Could you kindly help more please? how do I make the width of the description smaller? and the font of the collection name smaller? 

[Made4uo-Ribe · Accepted solution]

I dont understand the original post you said you like the length of the description up to the 4th images. You like to change it again? On what size for the font?

[MyCity]

Correct, but looking at how it looks now, I think it would look better with shorter width and maybe slightly smaller font. Could you have a look at my site and a collection page? E.g. limited edition? Please don't post the name of my site here. 

Kindly let me know. 

Thank you in advance. 

[Made4uo-Ribe · Accepted solution]

Okay, I understand can you take out the code that I give you with the max-width. And add this one. 

.collection-hero__description.rte {
    text-align: center;
    margin: auto;
}

Result:

For the font title:

h1.collection-hero__title {
    font-size: 30px;
}

Result:

Note: you can change the font size whatever you like.

Yeah, i know the store is private that is why I only SS the specific area. 

I hope it help.

[MyCity]

All worked. 

Now there is a big gap between the main menu navigation and the Collection name. Can this be adjusted? I am sorry to be asking you so many questions. You seem to be very knowledgeable in this code/theme/platform. 

Thank you again in advance. 

[Made4uo-Ribe]

The gap are the size of the header. If youll edit the header it will apply in all pages. 

But what I can do is to reduce the header margin. Try this. 

h1.collection-hero__title {
    margin-top: 0px;
}

I cant share the SS. 😅 

Thank you for the compliments. 

[MyCity]

Can you please have a look at my H2O Collection page? The description is a bit off. Can you see it? Would you have a solution to this? 

Also, I was wondering whether you could give a solution to our Gift Card page? The picture is very large. Is it possible to make it smaller? Thank you 

[Made4uo-Ribe]

Im not sure what youll like me to edit there, Please specify. If youll like changes/edit or costumization to your store please visit us. Thanks!