Solved

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

FFPNF
Tourist
16 0 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

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3477 461 520

This is an accepted solution.

Hi @FFPNF 

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

Step 1:

view (69).png

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.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 7 (7)

made4Uo
Shopify Partner
3829 716 1159

Hi @FFPNF,

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
FFPNF
Tourist
16 0 1

hi thanks for responding 

it’s in the product page. 

 

password : Laispotty

 

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

PageFly-Victor
Shopify Partner
7865 1785 3067

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 </body>

 

PageFlyVictor_2-1681202750699.png

 

PageFlyVictor_3-1681202750436.png

 

<style>

.rich-text__wrapper.rich-text__wrapper--left.page-width {

    margin-left: 0;

}

.rte ul, .rte ol{
padding-left: 0;
}

</style>

 

Hope this answer helps.

Best regards,

Victor | PageFly

BSS-Commerce
Shopify Expert
3477 461 520

This is an accepted solution.

Hi @FFPNF 

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

Step 1:

view (69).png

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.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

FFPNF
Tourist
16 0 1

This works! Thank you so much 😄

BSS-Commerce
Shopify Expert
3477 461 520

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Rachel355
Shopify Partner
1 0 0

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!