Shopify themes, liquid, logos, and UX
I'm trying to minimize the font size of collection list titles on brooklyn theme, but im stuck, can someone please guide me through this?
Solved! Go to the solution
This is an accepted solution.
Thanks for revert code now look proper
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.collection-grid__item-title {
font-size: 24px; /* change font size as you like.*/
}
Hello, @lonniefryer
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
this is the URL but my store isnt published yet. I'm attaching pictures so that its more clear.
Thanks for URL sorry but I can't see a view
Hi @lonniefryer,
You can inspect the live page and adjust the font size of the collection grid item title to your liking:
Then when you find the font size you like, just add this code to your theme.scss.liquid file:
@media screen and (min-width: 591px)
.collection-grid__item-title {
font-size: 2.42857em;
}
Dont forget to change the font size value.
By the way, you should add more product images. It's essential, especially for visually-driven products like clothings. You can take a look at this article about the types of product images you need to add to product pages.
Hi Quang,
First of all, thank you for your positive response. But by doing as you mentioned, it is disturbing the whole layout of the store. I've attached the pictures, please see.
This is an accepted solution.
Thanks for revert code now look proper
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.collection-grid__item-title {
font-size: 24px; /* change font size as you like.*/
}
Works Perfect, Thank you Ketan!
Hi is this possible to change only mobil version and not desktop version. If i change font size my my mobil version look very nice and i can read the all collection name but the problem is the font size is very small if i change to desktop version. Is there any solution ? thank you
Welcome to the Shopify community!
and Thanks for your question.
Please share your site URL,
So I will check and provide a solution here.
Hi Ketan
my site is not published yet but will you log in if I give password or what do you prefer?
if you have front end password is confidential so please to a personal message as you like.
Thanks for it
can you please share a screenshot further issue
see please mobil version is fine because i chance theme grid coding as you show so it is very fine but on desktop version the text is very little
Thanks for more details
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.collection-grid__item-title {
font-size: 14px;
}
@media only screen and (min-width: 769px) {
.collection-grid__item-title {
font-size: 24px;
}
}
Thank you so much !!
it's my pleasure to help us
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024