Hi! Does anyone know how to center-align the collection page text for mobile view? The body text is currently not in line with the header.
I have currently tried putting this code under “component-collection-hero.css” but it still doesnt work. I also tried to make the font smaller for mobile view using the css below but it hasnt made any changes.
My store URL is: https://verterra.sg/password, password is VerterraTest123
Moeed
July 3, 2024, 9:51am
2
Hey @Verterra
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @Verterra
Go to online store ---------> themes --------------> actions ------> edit code-------> search—> assets -----> component-collection-hero.css -----> line number 71
search this code
.collection-hero__title + .collection-hero__description {
font-size: 0.8rem !important;
text-align: center !important;
margin-top: 1rem;
margin-bottom: 1.5rem;
padding-left: 5 rem !important;
padding-right: 0 rem;
max-width: 100% !important;
}
}
and replace with this code.
.collection-hero__title + .collection-hero__description {
font-size: 0.8rem !important;
text-align: center !important;
margin-top: 1rem;
margin-bottom: 1.5rem;
padding-left: 5 rem !important;
padding-right: 0 rem;
max-width: 100% !important;
}
}
the result will be
If this was helpful, hit the like button and mark the job as completed.
Thanks
Thank you, this worked! Do you know how to adjust the font-size, as putting in this code doesnt seem to be affecting the font sizing.
Do you mean font size of this same section.??
Go to online store ---------> themes --------------> actions ------> edit code------->base.CSS
at the very end of the file.
@media screen and (max-width: 749px) {
#shopify-section-template--22973302014235__banner p {
font-size: 14px;
}
}
@media screen and (max-width: 749px) {
#shopify-section-template--22973302014235__banner h1 {
font-size: 20px;
}
}
the result will be
If this was helpful, hit the like button and mark the job as completed.
Thanks