How can I align text to the left in Dawn Theme using CSS?

Store Design
1

Hi

I am having trouble shifting the text within the rich text box to the extreme left.

Will like to align it with the para above.

It looks fine on the desktop however on the mobile, there is some spacing as per the screenshot.

Is there any CSS code that I can input to remove the spacing and move it closer to the left.

photo1681135809.jpeg
photo1681135809.jpeg770×1280 82.8 KB

1 Like
2

Hi @FFPNF ,

Please sure your website so we can provide a code specific for you

3

hi thanks for responding

it’s in the product page.

password : Laispotty

https://fluffypawssg.myshopify.com/products/eli-the-dino

4

Hi @FFPNF

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyVictor_2-1681202750699.png
PageFlyVictor_2-1681202750699.png1600×794 164 KB

PageFlyVictor_3-1681202750436.png
PageFlyVictor_3-1681202750436.png1600×777 194 KB

Hope this answer helps.

Best regards,

Victor | PageFly

5

Hi @FFPNF

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

Step 1:

view (69).png
view (69).png1862×673 102 KB

Step 2:

Find the file base.css or base.scss.liquid and copy this code at the end of the file

@media only screen and (max-width: 749px){
    .rich-text__wrapper.rich-text__wrapper--left.page-width {
        padding-left:0;
    }
}

Hope this help you.

6

This works! Thank you so much :grinning_face_with_smiling_eyes:

7

Hi @FFPNF

We’re happy to see that our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution? This can be a reference for other merchants if they have an issue like you.

Thanks in advance.

8

I am having this same issue in Dawn - cannot left align text in Rich Text block.

I tried adding this code to the end of the base.css file but it does not appear to be working..

@media only screen and (max-width: 749px){
.rich-text__wrapper.rich-text__wrapper–left.page-width {
padding-left:0;
}
}

Help!