Shopify themes, liquid, logos, and UX
Hi,
How to make the collection banner text field bigger?
Thank you for your help.
Solved! Go to the solution
This is an 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!
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
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.
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
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.
This is an 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!
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025