make productname smaller on mobile

[sixdreamz]

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

url: sixdreamz.com

password: sdc2003

[websensepro]

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 </head>

<style>
@media only screen and (max-width: 767px) {
    .card__information {
        border: solid 1px black !important;
    }
    .card__information h3 {
        font-size: 10px !important;
    }
}

</style>

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

Thanks!

[Tech_Coding · Accepted solution]

 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 </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
   .card__information {
       border: solid 1px black !important;
    }
    .full-unstyled-link {
        font-size: 10px !important;
    }
}
</style>

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

[Rahul_dhiman]

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

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

[ZestardTech]

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;
}
}