(Dawn) Mobile UI Text Alignment/Resize for Featured Collection

Store Design
1

Is it possible to make the price, discounted price, and savings text smaller & better aligned for mobile, as well as position both price and savings opposite of each other for smaller devices?

How it looks:

https://imgur.com/a/FCvGnkz

How I would like it to look:
https://imgur.com/a/xfHc2vO

Store link: https://95d536-88.myshopify.com/

Store keycode: www

2

Hi @friendlyrobot19 ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

@media screen and (max-width: 404px) {
    .collection .collection__title h2 strong {
        font-size: 16px;
    }
    
    .collection .collection__title .collection__description a {
        font-size: 12px;
    }
    
    .card .card-information span,
    .card .card-information .save-mount,
    .card .card-information .price__sale s {
        font-size: 10px;
    }

    .card__content .quick-add .quick-add__submit.button {
        /* background: red; */
        min-height: 10px !important;
        margin-bottom: 3px;
    }
}

Here is the result

BSSTekLabs_0-1722167767786.png
BSSTekLabs_0-1722167767786.png796×808 18.2 KB

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!