Change font size of vendor name in mobile view, Narrative theme

Hi, how do i change font size of the vendor name on collection page for mobile view only? using narrative theme

@media only screen and(max-width:768px){
.card__brand {
font-size: 1rem !important;
}
}

managed to figure out, might help others out here

hello @elitaco

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 729px){
.template-collection .card-list.grid .card-list__column .card__info .card__brand{
    font-size: 11px !important;
}
}

thanks. how do i make this section at the center on mobile view?

hello @elitaco

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 729px){
   .product-template .vario-all-variant-wrapper{
    text-align: center  ;
}
 .product-template .vario-variants:not(select) {
    justify-content: center;
}
}
1 Like

Thanks! How do I swap the colour variant to be above of size variant on product page? on both website and mobile

Hi,

I i’m wanting to do the same thing - make the font size of the vendor name smaller in mobile view so the vendor reads all on one line. Ive tried pasting the code you recommended and it hasn’t worked for me. Please could you advise on what to do?

Thank you