Special Case: How to change color and size for both Vendor and Product Name?

[DFSouth]

Hi Shopify Community, 

Do you have any codes that I can change the color and size for both Vendor and Product Name on the collection page but only for Mobile Version? 

Here is my store: https://dfsouth.com.au/

Best regards,

Ian

[PageFly-Richard]

Hi @DFSouth 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media screen and (max-width: 767px){
.collection .card__information .full-unstyled-link, .collection .caption-with-letter-spacing.light{
    color: red;
    font-size: 18px !important;
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[DFSouth]

Hi, @PageFly-Richard  

Do you have separate codes to modify each vendor name and and product name? I mean in a separate way. I want two codes that I can modify vendor name and product name differently. Cause the code you gave, once you change stuff in that code, it's gonna affect both vendor name and product name at the same time. 

Best regards,

Ian

[PageFly-Richard · Accepted solution]

@DFSouth so you can try this code, i will separate it for you

<style>
@media screen and (max-width: 767px){

.collection .card__information .full-unstyled-link {
color: blue;
font-size: 24px !important;

}

.collection .caption-with-letter-spacing.light{
    color: red;
    font-size: 18px !important;
}
}
</style>

First block is for product name, last block is for vendor

[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: 767px ){
.collection .card__information .full-unstyled-link, .collection .caption-with-letter-spacing.light{
color: #e30000;
font-size: 18px !important;
}
}

[DFSouth]

Hi, @ZestardTech 

Do you have separate codes to modify each vendor name and and product name? I mean in a separate way. I want two codes that I can modify vendor name and product name. Cause the code you gave, once you change stuff in that code, it's gonna affect both vendor name and product name at the same time. 

Best regards,

Ian