Align Product Information Left on Screen Size Above 591px

Solved
Highlighted
Excursionist
30 2 5

Hi all,

I am currently trying to figure out a way on how to align the text on my product page to the left. I succeeded in doing so for the title, however the price does not want to budge, and I am curious how I would do this with the colour button too (which seems to be part of the add to cart button (because it is an app)). This is the following code I tried, and only the first one seems to work. I'm new to this, so I would really appreciate someone helping me with this :)

Thanks in advance!

Koen

Succeeded with title alignment leftSucceeded with title alignment leftCode I used, first one only seems to work.Code I used, first one only seems to work.What I want left aligned (Desktop)What I want left aligned (Desktop)What I want center aligned (Mobile)What I want center aligned (Mobile)

0 Likes
Highlighted
Shopify Partner
20 2 7

This is an accepted solution.

If your price and color swatches are centered by text-align, you must add this CSS rule to its parent node (parent div, span, etc.):

text-align: left;

but these elements can be centered by flexbox rules. To change this add this CSS rule to its parent node (you can identify this, by checking if some of parent nodes have display: flex rule):

justify-content: flex-start;

 

 

1 Like
Highlighted
Excursionist
30 2 5

Hi Rabbyte!

Thanks for your help. I managed to fix it :) 

It was .product-single that I had to tackle and not .product-single__price. However without your help I wouldn't have found this. Thanks again!

 

 

0 Likes
Highlighted
Excursionist
30 2 5

One more quick question! I am trying to change the hr (line break) to the left side too, however I am unsure how to do this as it will change it in the whole theme and not just the product page. 

0 Likes
Highlighted
Shopify Partner
20 2 7
Unfortunately, I think you can't change this by one style in the whole theme, because it is probably centered by parent's style, so you must change this in each parent node.

It is hard to say without a glance to the theme.
1 Like
Highlighted
Excursionist
30 2 5

Hi once again,

I attached the code to this message. I changed line 856 to 873, however I don't know what I did wrong as it does not seem to align centered on the mobile version.

Im really uncertain what I did wrong and don't want to touch any more code as I'm not good at it as you saw.

 

214866758a2ea9b6407854f29a181160.png

0 Likes
Highlighted
Excursionist
30 2 5

Fixed it with the following code:

@media screen and (max-width: 590px){
  .hr--small {
    @extend hr;
    margin: 20px auto!important;
  }
}

@media screen and (min-width: 591px){
  .hr--small {
    @extend hr;
    margin-top: 20px auto!important;
    margin-right: 20px auto!important;
    margin-bottom: 20px auto!important;
    margin-left: 0px auto!important;
  }
}

Thanks for your help though :)

0 Likes