Align Text to the left on Image with Text Component for mobile view, Dawn Theme

[Verterra]

Hi, does anyone know how to adjust the text alignment for my image with text components on my shop. Currently theres alot of white space on the left, and I want the font to align nicely with the left, so that its directly underneath the left corner of the photos. I also want the font to continue all the way through. to the right edge so it aligns with the right side of the photos too. Thanks!

My store URL is: https://verterra.sg/password, password is VerterraTest123

[Moeed · Accepted solution]

Hey @Verterra 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.image-with-text.collapse-corners:not(.image-with-text--overlap) .grid__item .image-with-text__content {
    padding-left: 0 !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[BSSCommerce-TC]

Hi @Verterra ,

Is this final result you want?

You can follow these steps

Step 1: Go to Online store > Themes > Edit code and find base.css file

Step 2: Insert below code at the end file and Save them

@media screen and (max-width: 749px) {
    .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__text-item:after, .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid__item .image-with-text__content {
        padding: 10px 0 !important;
    }
}

[Moeed · Accepted solution]

Hey @Verterra 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.image-with-text.collapse-corners:not(.image-with-text--overlap) .grid__item .image-with-text__content {
    padding-left: 0 !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Verterra]

Thank you! This works too, just that I added padding-right: 0 as per the other solution so it would stretch across the screen. 

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Verterra 
- Please follow these steps:

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media screen and (max-width: 749px) {
.image-with-text.collapse-corners:not(.image-with-text--overlap) .grid__item .image-with-text__content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Verterra]

Thank you, this worked well for me! 🙂 

[BSS-TekLabs]

No problem. If you need any help, just message me.