Align Product Title and Vendor Name to Left & Adjust Font Sizes

[LEEDIA]

 

I currently have a few changes on my catalog and product page I’d like to make, which I hope aren’t too complicated.

On mobile view I managed to align the product title and price to the left but not the vendor name (which I use to show color options), but in desktop view the product title and vendor name are still centered.

I would also like to adjust each of the font sizes (product title, vendor name, and price) separately for both mobile and desktop since the title is too big on mobile and the vendor name is small on both. 

Hope this isn’t too much to ask for. I appreciate any help 🙂

URL:  https://leediastore.com

Password: yaurow 

[Beae_Cass]

Hi @LEEDIA ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:

<style>
@media only screen and (max-width: 747px){
    .card__heading {
        font-size: 14px;
    }
    .card-information>.price {
    text-align: left !important;
}

}
.card-information>.price {
    text-align: center;
}
</style>

Best regards,

Anthony

[LEEDIA]

Using some of the code you provided I managed to get everything aligned to the left on mobile, but on desktop the product title is still in the center. Any way to align it to the left there too? Thanks