Align Product Information Left on Screen Size Above 591px

Solved
Tourist
12 1 1

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

6e03902388d8069b31a00620fbe3c605.pngSucceeded with title alignment left8332ef6f3ea29f3f2f4a48c52b0e2b8e.pngCode I used, first one only seems to work.Product page (need to align text left).pngWhat I want left aligned (Desktop)Product page mobile (need to reduce font size and keep text centered as it is).pngWhat I want center aligned (Mobile)

0 Likes

Success.

Shopify Partner
17 1 4

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
Tourist
12 1 1

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
Tourist
12 1 1

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
Shopify Partner
17 1 4
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
Tourist
12 1 1

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
Tourist
12 1 1

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