How to make the collection banner text field bigger

[GroupeCEA]

Hi,

How to make the collection banner text field bigger?

Thank you for your help.

[BSS-Commerce]

Hi @GroupeCEA ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[GroupeCEA]

Hi @BSS-Commerce !

The link of our shop is: https://pieces.groupecae.com/ 

The section-rich-text.css is as follows: 

.rich-text {
z-index: 1;
}

.rich-text__wrapper {
display: flex;
justify-content: center;
width: calc(100% - 4rem / var(--font-body-scale));
}

.rich-text:not(.rich-text--full-width) .rich-text__wrapper {
margin: auto;
width: calc(100% - 8rem / var(--font-body-scale));
}

.rich-text__blocks {
width: 100%;
}

@media screen and (min-width: 750px) {
.rich-text__wrapper {
width: 100%;
}

.rich-text__wrapper--left {
justify-content: flex-start;
}

.rich-text__wrapper--right {
justify-content: flex-end;
}

.rich-text__blocks {
max-width: 50rem;
}
}

@media screen and (min-width: 990px) {
.rich-text__blocks {
max-width: 78rem;
}
}

.rich-text__blocks * {
overflow-wrap: break-word;
}

.rich-text__blocks > * {
margin-top: 0;
margin-bottom: 0;
}

.rich-text__blocks > * + * {
margin-top: 2rem;
}

.rich-text__blocks > * + a {
margin-top: 3rem;
}

.rich-text__buttons {
display: inline-flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
width: 100%;
max-width: 45rem;
word-break: break-word;
}

.rich-text__buttons--multiple > * {
flex-grow: 1;
min-width: 22rem;
}

.rich-text__buttons + .rich-text__buttons {
margin-top: 1rem;
}

.rich-text__blocks.left .rich-text__buttons {
justify-content: flex-start;
}

.rich-text__blocks.right .rich-text__buttons {
justify-content: flex-end;
}

Thank you. 

[BSS-Commerce · Accepted solution]

Hey @GroupeCEA ,

The error is because you have set the max-width of .collection-hero__description to 66.67% when the screen size is larger than 750px.

To make the text field on the banner larger, find the component-collection-hero.css file and edit the code in the .collection-hero__description section inside @media screen and (min-width: 750px) to look like this:

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

Hope it works!

[GroupeCEA]

Hi @BSS-Commerce ,

It works very well.

Many thanks.