How to align product title and price on the Dawn theme?

Store Design
, ,
1

I was wondering if there were a way to make the price line up with the title just like how I had it on my previous store. My site is rezith.com and I am currently using the dawn theme, I have also attached the current layout along with the layout I would like, to avoid confusion, I would like the price to be on the same horizantal line as the title. I’d appreciate any help, thank you

Current
Current424×509 87.7 KB

Desired
Desired319×461 64.2 KB

2

Hi @rezithclo

I hope you are doing good and welcome to the Shopify Community!
I am Santanu from MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore).

Please add this css in your bottom of the css file:

@media only screen and (min-width: 750px) {

.card__content .card__information {display: flex; align-items: start;}
.card__content .card__heading {width: 80%;}
.card__content .card__information .card__information {width: 20%;}
.card__content .card__information .card__information .price {margin-top: 0 !important;}

}

Regards,

Santanu

3

@rezithclo

@media only screen and (min-width: 750px) {

.card__heading {
    width: 75%;
    align-items: center;
    display: flex;
}
.card__information {
    display: flex;
}
.card__content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: column;
}
.card-information {
    width: 20%;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

4

Hello @rezithclo ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677046676072.png
GemPages_0-1677046676072.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1677046697992.png
GemPages_1-1677046697992.png1433×939 69.5 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

5

Hello @rezithclo ,

To resolve this issue, you need to add the below-provided code in your base.css file.

.card__content .card__information{

display: flex!important;

}

.card__content .card__heading{

width: 100%!important;

margin-top: 2%;

}

.card__content .card-information{

width: 20%!important;

text-align: end;

}

.card__content .card__information .card__information .price {

margin-top: 0 !important;

}

result:-

Hope it helps. Let us know if you have any further questions.

All the best,

CedCommerce

6

Hello @rezithclo ,

To resolve this issue, you need to add the below-provided code in your base.css file.

.card__content .card__information{

display: flex!important;

}

.card__content .card__heading{

width: 100%!important;

margin-top: 2%;

}

.card__content .card-information{

width: 20%!important;

text-align: end;

}

.card__content .card__information .card__information .price {

margin-top: 0 !important;

}

result:-

Updating Media

Hope it helps. Let us know if you have any further questions.

All the best,

CedCommerce

7

Thank you so much, worked perfectly, have one question though, Is there a way to make the text price smaller? On my theme settings I cant adjust the % any lower