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 or marking it as a solution.
For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS
BSS Commerce - Shopify Apps & Store Development Service Provider
Hire a Shopify expert | Shopify Plus Store Development
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 or marking it as a solution.
For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS
BSS Commerce - Shopify Apps & Store Development Service Provider
Hire a Shopify expert | Shopify Plus Store Development
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 or marking it as a solution.
For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS
BSS Commerce - Shopify Apps & Store Development Service Provider
Hire a Shopify expert | Shopify Plus Store Development
User | RANK |
---|---|
227 | |
175 | |
63 | |
52 | |
48 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023