Product Page - Align title left, price right, on a single line (Dawn Theme)

[bhristopher]

I’m having problems with how the title and the price are floating on the product page.

The goal is to have the title float left, and the price float on the right side.

Does anyone know how I can fix this for both desktop and mobile?

Url: https://flaud.world/

Password: 202135283

Thanks,

B

[dmwwebartisan]

@bhristopher

1] Please add following code your assets /section-main-product.css bottom of the file .

.product .price {
    align-items: flex-start;
    float: right !important;
}

2] Please add following code your assets / component-accordion.css bottom of the file .

.accordion {padding-top: 30px !important;}

Thanks!

[diego_ezfy]

@bhristopher , do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.product__title{
    margin-top: 0 !important;
}

[id*='price-template']{
    display: inline-block;
    margin: 0 0 0 auto !important;
    float: right;
}

.product__accordion{
    padding-top: 30px;
}

Kind regards,
Diego

[ThomasBorowski]

No need to use floats, try adding this to assets/section-main-product.css:

.product .price {
    justify-content: flex-end;
}

You might also want to add this to remove the top margin from the product title on mobile:

[id^="ProductInfo-template"] .product__title {
  margin-top: 0;
}

[Puma1027]

@bhristopher

Hello.

You have to add the code in “theme.scss.liquid”.

.product__title {
    margin-top: 0 !important;
}
.product .price {
    justify-content: flex-end;
}

[Puma1027]

Please confirm this image.

[bhristopher]

@Puma1027 @ThomasBorowski @diego_ezfy @dmwwebartisan

@Puma1027 Those images you sent are how I want it.

I tried everything you all responded with and got the same result:

[ThomasBorowski]

Based on the current code, if you make .product__title CSS look like this it should work:

.product__title {
  word-break: break-word;
  margin-bottom: 0;
  float: left;
  margin-top: 0;
}

[bhristopher]

It worked. Appreciate you!

@ThomasBorowski @Puma1027 @diego_ezfy @dmwwebartisan While I have you guys here,

How do I get the space between the size dropdown and the “add to cart” button to look the same on mobile, as it does on desktop?

[ThomasBorowski]

The button on is being pulled up by 18 px in the desktop view, looks like a custom CSS change as it’s not in the standard Dawn CSS. Look in base.css for a rule for .button–full-width that sets top: -18px !important;. Either delete or comment out that line and the gap between the dropdown and the button should be the same on desktop and mobile.

[bhristopher]

@ThomasBorowski Found it, I tried making adjustments to “top” but it only makes adjustments for desktop. It doesn’t move for mobile, even when I delete it.

[ThomasBorowski]

Yeah, that rule only applies to desktop, I was assuming the bigger gap on mobile was what you wanted. The very narrow -18 px gap on desktop doesn’t look great because it breaks the uniform grid of all the elements. I’d recommend going with the bigger gap which should be achieved by deleting that -18 px rule.

[bhristopher]

@ThomasBorowski How can I adjust the space between the two for mobile? I want to see what it looks on mobile when bringing them abit closer.

[ThomasBorowski]

Right now the CSS rule is inside a media query (@media only screen and (min-width: 992px). Just move the rule outside of that media query and it will always be applied.

Pro tip though: Don’t fiddle with details like this too much, in the end they won’t make much of a difference. Focus on getting your store up and running and making sales.

[Puma1027]

If you delete this code in “theme.scss”, the site will be cool more.

.product-form__input .select {
max-width: 40rem;

}