How to align price with product title mobile version

How to align price with product title mobile version

YIVAN
Explorer
51 1 16

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.

Screen Shot 2024-06-15 at 9.30.41 AM.png

Here is how it looks on desktop:

Screen Shot 2024-06-15 at 9.30.17 AM.png

 

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

Pass: YIVAN24

Thanks in advance

Replies 8 (8)

PageFly-Amelia
Shopify Partner
493 154 222

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

YIVAN
Explorer
51 1 16

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

BSSCommerce-B2B
Shopify Partner
565 114 137

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: 

BSSCommerceB2B_2-1718462829254.png

Or title on the left

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

BSSCommerceB2B_0-1718463170751.png

 

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

 

 

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
YIVAN
Explorer
51 1 16

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

BSSCommerce-B2B
Shopify Partner
565 114 137

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

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
YIVAN
Explorer
51 1 16

This one also did not work for me.

BSSCommerce-B2B
Shopify Partner
565 114 137

Sorry for the inconvenience. Please try one last time.

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

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

devcoders
Shopify Partner
191 31 48

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

 

devcoders_0-1718464354070.png

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!