make productname smaller on mobile

Store Design
, , , , , , , , , , , , , ,
1

hey,

on my mobile layout the name and the box around it seems very chunky.

is it possible to make the lines of the box a little bit thinner, and the letters a little bit smaller?

NOTE: only for mobile

sixdreamz_0-1727422900599.png
sixdreamz_0-1727422900599.png511×1212 63.4 KB

url: sixdreamz.com

password: sdc2003

1 Like
2

Hi @sixdreamz ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

websensepro_0-1727423256074.png
websensepro_0-1727423256074.png325×572 60.3 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

3

Hello @sixdreamz

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .card__information { border: solid 1px black !important; } .full-unstyled-link { font-size: 10px !important; } }

Tech_Coding_0-1727423406172.png
Tech_Coding_0-1727423406172.png319×488 26.4 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

4

Hello @sixdreamz
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

h5, .h5 {
font-size: 10px !important;
}
.card__information {
border: solid 1px black !important;
}

result

5.png
5.png415×789 45.2 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media screen and (max-width: 750px) {
.card__information h3 {
font-size: 12px;
}
.card__information {
border: solid 1px black !important;
}
}