How to align price with product title mobile version

[YIVAN]

Hello,

Is there a way for me to align the title of the product with the price on the lefthand side? It is fine on desktop but on mobile the title is centered. I would like it to be on the left.

Here is how it looks on desktop:

URL:https://www.yivan.us/

Pass: YIVAN24

Thanks in advance

[PageFly-Amelia]

Hi @YIVAN 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css

Step 3: Add code

@media (max-width: 767px) {
.card-information .price {
   text-align: center;
}
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[YIVAN]

Hello, the code didn't work for me. I also want the title on the left not the price in the center.

[BSSCommerce-B2B]

Hi @YIVAN ,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

@media (max-width: 768px){
    .card-information .price {
        text-align: center !important;
    }
}

Here is result: 

Or title on the left

.card__information .full-unstyled-link {
    text-align: left !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[YIVAN]

Im not sure why the code didn't work for me.

[BSSCommerce-B2B]

It doesn't work because it is overridden by a piece of code. Try again with the code below.

.collection .card__content .card__heading.h5 a {
    text-align: left !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[YIVAN]

This one also did not work for me.

[BSSCommerce-B2B]

Sorry for the inconvenience. Please try one last time.

.card__information .full-unstyled-link {
    width: fit-content !important;
}

[devcoders]

Hi @YIVAN 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.

.card__information .full-unstyled-link {
text-align: inherit!important;
}