Solved

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

cdgerard
Shopify Partner
43 2 3

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!

 

widen.png

Accepted Solutions (2)
AnneLuo
Shopify Partner
480 98 96

This is an 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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

View solution in original post

AnneLuo
Shopify Partner
480 98 96

This is an 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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

View solution in original post

Replies 9 (9)

AnneLuo
Shopify Partner
480 98 96

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.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
cdgerard
Shopify Partner
43 2 3
AnneLuo
Shopify Partner
480 98 96

This is an 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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
cdgerard
Shopify Partner
43 2 3

This has solved the issue. thanks a lot!

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

AnneLuo
Shopify Partner
480 98 96

All the pages 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
cdgerard
Shopify Partner
43 2 3

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
Shopify Partner
480 98 96

This is an 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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
cdgerard
Shopify Partner
43 2 3

Works, Thanks very much!

suyash1
Shopify Partner
9260 1151 1495

@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;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI