Dawn - image with text - not limiting text alignment on mobile

Store Design
1

Hi,

I’m using the Dawn 2.0 theme.

https://wortheattt.myshopify.com/

I have an image with text section, and I want its text area to be wider in the mobile platform than what it is now:

Ben1000_1-1647767959678.png
Ben1000_1-1647767959678.png780×162 13.3 KB

How can I change it?

Thanks

2

Hi @Ben1000 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-image-with-text.css->paste below code at the bottom of the file:
.image-with-text__content {
    padding: 0 !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

Hi @AvadaCommerce

I want this solution to be only on mobile (not desktop)

4

Hi @Ben1000 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-image-with-text.css->paste below code at the bottom of the file:
#shopify-section-template--14625265319989__16459638514e39b28f .image-with-text__content {
    padding: 0 !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

Hi @AvadaCommerce

How can I make it only on mobile? (not desktop platform)

6

Hi @Ben1000 ,

You try below code in component-image-with-text.css file:

@media (max-width: 767px) {
#shopify-section-template--14625265319989__16459638514e39b28f .image-with-text__content {
    padding: 0 !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

7

Thanks @AvadaCommerce ,

How do I make it work for all ‘image with text’ sections on mobile?

8

Hi @Ben1000 ,

You try below code in component-image-with-text.css file:

@media (max-width: 767px) {
.image-with-text__content {
    padding: 0 !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

9

Hi @AvadaCommerce

Thanks it works,

How I do the same with a rich text section?

10

Hi @Ben1000 ,

You try below code in section-rich-text.css file:

@media (max-width: 767px) {
.rich-text--full-width .rich-text__blocks {
    width: 100% !important;
    padding: 0 1.5rem !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

11

Hi @AvadaCommerce ,

Thank you, it works!