How can I adjust collection titles for mobile view on Empire theme?

Store Design
, , , , , ,
1

Hello, I hope you are having a fantastic day!

I need some help with the collection titles that are being displayed only on mobile, desktop is perfect and needs no changes. If there is a step by step guide or even some type of code that can be used so that the titles will adjust accordingly to the width of the page that would be perfect! I will attach a picture of what I am describing. I am using the Empire theme by pixel Union and my url is crazycollecting.myshopify.com

Thanks!

crazycollecting_1-1682549916408.png
crazycollecting_1-1682549916408.png511×890 181 KB

2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset->theme.css and paste this at the bottom of the file:
@media only screen and (max-width: 767px) {
  .collection--title {
   font-size: 16px;
    line-height: 1.2;
  }
}

ZestardTech_0-1682573222642.png
ZestardTech_0-1682573222642.png1851×807 93.2 KB

3

Hello @crazycollecting

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

.collection--title {
    line-height: 1.2  !important;
    font-size: 18px !important;
}