Solved

Image with text full width on both desktop and mobile

lewis765678
Tourist
23 0 1

I am using Dawn theme 14.0.0 and trying to have my image with text full width. In other words, i would like both sides to be touching either side of the page rather than having a white gap. Can you help me with this?

Accepted Solution (1)
thirtycoders
Shopify Partner
108 19 24

This is an accepted solution.

Hello @lewis765678,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file -> Save

 

.section-template--22717523460444__image_with_text_3LVCCD-padding.gradient.color-scheme-1 .page-width {
   padding: 0px !important;
}

.section-template--22717523460444__image_with_text_3LVCCD-padding.gradient.color-scheme-1 {
overflow-x: hidden;
}


 Thanks!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com

View solution in original post

Replies 12 (12)

thirtycoders
Shopify Partner
108 19 24

Could you please share your website url?

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com

pawankumar
Shopify Partner
504 64 90

Hi @lewis765678 
Please put this code in custom css part in "image with text" section

.image-with-text {
  margin-inline: 0px;
}
.image-with-text__grid {
  width: 100vw;
}

pawankumar_0-1715520554082.png

Please check if it is helpful to you.

Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
lewis765678
Tourist
23 0 1

Sorry, it still does not seem to be working. any other ideas?

 

lewis765678
Tourist
23 0 1

Im looking for there to be no padding on the left and right side of the image with text so that it has not wide gaps either side of it. 

pawankumar
Shopify Partner
504 64 90

@lewis765678 
Please replace that custom css with 

.image-with-text {
  margin-inline: 0px;
  padding-inline: 0px;
}
.image-with-text__grid {
  width: 99vw;
}
.image-with-text__content {
  padding-right: 0px;
}
.page-width {
 padding-inline: 0px;
}

and if it works for you
Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
pawankumar
Shopify Partner
504 64 90

Can you please share store url and password as well in case it is password protected ?
It will help me to look into the issue
Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
lewis765678
Tourist
23 0 1
thirtycoders
Shopify Partner
108 19 24

You want to like this? @lewis765678 

thirtycoders_0-1715522119227.png

 

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
lewis765678
Tourist
23 0 1

yes that would be amazing!

thirtycoders
Shopify Partner
108 19 24

This is an accepted solution.

Hello @lewis765678,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file -> Save

 

.section-template--22717523460444__image_with_text_3LVCCD-padding.gradient.color-scheme-1 .page-width {
   padding: 0px !important;
}

.section-template--22717523460444__image_with_text_3LVCCD-padding.gradient.color-scheme-1 {
overflow-x: hidden;
}


 Thanks!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
lewis765678
Tourist
23 0 1

Thats done it! thanks very much

thirtycoders
Shopify Partner
108 19 24

Welcome please like and mark the solution @lewis765678 

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com