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

Store Design
1

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

2

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

managed to figure out, might help others out here

3

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

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

elitaco_0-1629449213234.png
elitaco_0-1629449213234.png591×1280 165 KB

5

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
6

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

elitaco_0-1629451252085.png
elitaco_0-1629451252085.png495×183 4.94 KB

7

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