Dawn Collection Page - reduce description text and padding between title and description

Store Design
1

Hi,

I have worked out how to reduce the title collection by putting this code in base.css

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

Does anybody know how I can reduce the font size of the description, and reduce the padding between title and description please.

Example of the page - https://tandoormaster.com/collections/tandoors

password TandoorMaster

2

@984488 ,

Can you share the screenshot ?

3

d4rmsc_0-1651052145514.png
d4rmsc_0-1651052145514.png856×314 14.8 KB

4

@984488 ,

.section-template--15350924050637__product-grid-padding {
    padding: 0;
}
h1.collection-hero__title {
    font-size: 20px;
    margin-bottom: 0;
}
.collection-hero__description.rte {
    margin: 9px 0;
}

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

5

Hi, I tried that and also this below but the description size is still staying the same.

.section-template–15350924050637__product-grid-padding {
padding: 0;
}

h1.collection-hero__title {
font-size: 24px;
margin-bottom: 0;
}
.collection-hero__description.rte {
font-size: 8px;
margin-top: 0;
}

6

@984488

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-collection-hero.css->paste below code at the bottom of the file.
.collection-hero__title+.collection-hero__description {font-size: 16px;
    margin-top: 10px;}
7

This works, thanks so much Ketan Kumar!

8

@984488 its my pleasure o help us

9

Hi, how can i align the description to the centre.

I tried adding in a text-align but it is aligning to the left margin
.collection-hero__title+.collection-hero__description {
font-size: 14px;
text-align: center;
margin-top: 10px;}

d4rmsc_0-1651186353716.png
d4rmsc_0-1651186353716.png1135×249 5.26 KB

10

@984488 ,

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

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

11

@984488

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-collection-hero.css->paste below code at the bottom of the file.
.collection-hero__title+.collection-hero__description {max-width: 100%;}
12

Many thanks that works

13

@984488

its my pleasure to help us