How can I adjust text width on Dawn theme's home page?

[cdgerard]

Hi

How can I widen the title and text on the "Image with Text" content section on the home page?

So that it is aligned with the left of the menu.

Dawn theme.

Screenshot attached.

Thanks!

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  @media screen and (min-width: 768px) {
    .image-with-text__content {
       padding-left: 0 !important;
    }
  }
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[AnneLuo]

Hello, @cdgerard 

It cannot be modified in the editor and can only be modified using code. Please share the store URL so that I can assist you.

[cdgerard]

https://kl61t2nkoblcpape-61358440707.shopifypreview.com

Thanks AnneLuo

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  @media screen and (min-width: 768px) {
    .image-with-text__content {
       padding-left: 0 !important;
    }
  }
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[cdgerard]

This has solved the issue. thanks a lot!

Question - has this affected only the ABOUT page or will that change other pages?

[AnneLuo]

All the pages 

[cdgerard]

I have a text alignment issue in the blog pages. The text is too narrow and your code hasn't changed it.

Please see here in the STORIES section.

https://kl61t2nkoblcpape-61358440707.shopifypreview.com

[AnneLuo · Accepted solution]

They are two different sections, so the code I provide don't affect the blog pages.

If you want to modify the blog page. You can try this code by following these steps:

Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  @media screen and (min-width: 990px) {
    .article-template .page-width--narrow {
      max-width: calc(100% - 10rem) !important;
    }
    .article-template header{
       text-align: center;
    }
  }
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[cdgerard]

Works, Thanks very much!

[suyash1]

@cdgerard - please add this css to the very end of your base.css file and check

.grid__item .image-with-text__content{padding-left: 0;}