How to make the collection banner text field bigger

Solved

How to make the collection banner text field bigger

GroupeCEA
Excursionist
20 0 9

Hi,

 

How to make the collection banner text field bigger?

How to extent text.PNG

Thank you for your help.

Accepted Solution (1)
BSS-Commerce
Shopify Partner
3477 465 555

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


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

BSS-Commerce
Shopify Partner
3477 465 555

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


BSS Commerce - Full-service eCommerce Agency
GroupeCEA
Excursionist
20 0 9

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
Shopify Partner
3477 465 555

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


BSS Commerce - Full-service eCommerce Agency
GroupeCEA
Excursionist
20 0 9

Hi @BSS-Commerce ,

 

It works very well.

 

Many thanks.