How can i change category bar in mobile version?

[store095]

Hi, i want to change the size of the category bubbles and the title text in to the mid. it's looking like this right now:

and i want to look it like this: 

https://ba571d-cc.myshopify.com/

password: 1239

Dawn Theme 15.0.0

Thank you.

[GTLOfficial]

Hello @store095 
Go to online store ---------> themes --------------> actions ------> edit code------->base.css.
add this code at the very end of the file.

@media only screen and (min-width: 750px) {
h2, .h2 {
font-size: 59px !important;
text-align: center;
}
}
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .card__information .card__heading {
font-size: 33px !important;
font-weight: 900;
}

.collection-list-wrapper {
max-width: 1000px !important;
}

result

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

[store095]

Hi, i want it only at the mobile version, not desktop version. 

But still thanks for your time and work.

Best regards 

[BSSCommerce-B2B · Accepted solution]

Hi @store095,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css.
Step 3. Add these codes to the end of the file

@media only screen and (max-width: 990px) {
  .collection-list.contains-card {
     display: grid!important;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
   }
}
.collection-list.contains-card .card__heading > a {
  font-weight: bold;
}

You will get the result like this in mobile

If it helps you, please like and mark it as the solution.

Best Regards

[store095]

Thanks.

I can‘t find the file base.css. I‘m using the Dawn theme 15.0.0 and my store url is https://ba571d-cc.myshopify.com/ . 

[BSSCommerce-B2B]

 @store095  Follow this please,
Step 1

Step 2

Step 3: Add to the end 

[store095]

I just found it and it's working.

Thank you. 🙂

[vijaybhesaniya]

You Goto Step 1. Go to Admin -> Online store -> Theme >

Step 2. Go To Customize
Step 3.Go To this perticular section and this section to setting to go down and search for mobile layout and this dawn side you got this setting Number of columns on mobile

[namphan]

Hi @store095,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
    .collection-list-title {
        text-align: center;
    }
    .collection-list  .grid__item {
        width: calc(33.33% - var(--grid-mobile-horizontal-spacing)* 2 / 3);
    }
}

[BSS-TekLabs]

- Here is the solution for you @store095 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media only screen and (max-width: 600px) {
.collection-list.contains-card.contains-card--collection {
 grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
display: grid !important;
}
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.