dawn 6.0.2. product name and price alignment

[ALY02SA]

Hi everyone 

I am having problems with editing the code for Dawn 6.0.2. Product page - product name and price alignment. I am trying to place the name of the product on all product pages and the price on the same line (product name right and price left). At the moment I have everything centred, this leaves a lot of space between the price, variant picker, etc, on the product page. My url; mysticmoods.co.uk. I hope someone can help with this. Thanks 

[Moeed]

Hey @ALY02SA 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product__info-container >* {
    margin-top: 0;
    margin-bottom: auto;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[ALY02SA]

@Moeed thank you very much for your reply, your code has helped with reducing the padding, however, what i am after is placing the product name and price on the same line. Thank you very much. 

[Moeed]

Hey @ALY02SA 

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you find this information useful, a Like would be greatly appreciated. Also, to get the product name and price on the same line is not possible via CSS code. It's a code customization work. If you're not familiar with coding then I highly suggest you to hire a Shopify developer.

Best Regards,

Moeed

[Made4uo-Ribe]

Hi @ALY02SA 

Im not sure if this is what you like to achieve, check it out. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (min-width: 749px){
.price.price--large.price--show-badge {
    text-align: left;
}
.product__title {
    text-align: right !important;
}

.price.price--large.price--show-badge {
    position: absolute;
    top: 29%;
}
}

• And Save. 
• Result:
• 

I hope it help. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ALY02SA]

@Made4uo-Ribe Thank you very much for your reply, that is exactly what I want to achieve, only difference being that the price has to be on the right side of the page and the title on the left side of the page. Thank you very much 

[ALY02SA]

@Made4uo-Ribe I have tried the code in base, theme and style and no results. 

[ALY02SA]

@Made4uo-Ribe It works in theme liquid, however it is not there yet; see the results 

 

[ALY02SA]

@Made4uo-Ribe i've managed to add product name left / price right; now do you happen to know how can i place them on the same line / level

 

[ALY02SA]

@Made4uo-Ribe also on mobile remains the same, title and price centred

[Made4uo-Ribe]

Hi, I manage to change it on mobile the price stick on the area. But the mobile it keep dancing because of the screen size gets smaller. Try this one. 

Same Instruction. 

.product__title {
    text-align: left !important;
}

.price.price--large {
    text-align: right;
}
.price.price--large.price--show-badge {
    position: absolute;
}

@media only screen and (min-width: 750px){
.price.price--large.price--show-badge {
    right: 3%;
    top: 28%;
}
}

@media only screen and (max-width: 749px){
.price.price--large.price--show-badge {
    right: 6%;
    top: 190%;
}
}
@media only screen and (max-width: 549px){
.price.price--large.price--show-badge {
    right: 6%;
    top: 150%;
}
}

And Save. 

Result: Mobile

Desktop:

I hope it help.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ALY02SA]

@Made4uo-Ribe thank you very much for your help; the webpage works great and everything aligned; 

    .product__title {

    text-align: left !important;

}

.price.price--large {

    text-align: right;

   top: 11.5%;

right:21.5%

}

    .price.price--large.price--show-badge {

    position: absolute;

      .product__title {

    text-align:absolute;

}

} 

Thank you very much for this!!

As per the mobile - I am coming to my wits end with the mobile ; product name left - price right. I have tried you're attached + a few combinations but the codes seems to interfere. 

[ALY02SA]

@Made4uo-Ribe when I use the code as is the price bounces on the right of the page; see attached + on mobile is not visible