Solved

Removing left and right padding with Dawn Theme

AllBellFitness
New Member
5 0 0

Hi there, 

I am wanting to remove the padding on left and right in the Dawn theme so that the coloured background stretches the full width of the screen. Is there a custom code or can I edit a current code to show 0 padding on left and right? 

 

I am using the Image with Text section in a few different areas all with different coloured backgrounds. See grey area and orange area. 

 

 

Screenshot 2023-01-20 at 11.08.37 am.png

Screenshot 2023-01-20 at 11.19.46 am.png

Accepted Solution (1)
suyash1
Shopify Partner
8992 1117 1466

This is an accepted solution.

@AllBellFitness - please use this css 

.image-with-text.page-width {padding: 0;    width: 100%;    max-width: 100%;}
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 created using AI

View solution in original post

Replies 11 (11)

suyash1
Shopify Partner
8992 1117 1466

@AllBellFitness - can you please share this page link?

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 created using AI
AllBellFitness
New Member
5 0 0
suyash1
Shopify Partner
8992 1117 1466

@AllBellFitness - password to view page?

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 created using AI
AllBellFitness
New Member
5 0 0

Oh sorry it's shohck

suyash1
Shopify Partner
8992 1117 1466

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

.image-with-text.page-width {padding: 0;}

 

suyash1_0-1674182077104.png

 

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 created using AI
AllBellFitness
New Member
5 0 0

@suyash1 It works when I am using my laptop screen but when I move over into a larger screen it isn't responsive like the full width images are. Is there a way to make it responsive for a larger screen? 

suyash1
Shopify Partner
8992 1117 1466

This is an accepted solution.

@AllBellFitness - please use this css 

.image-with-text.page-width {padding: 0;    width: 100%;    max-width: 100%;}
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 created using AI
AllBellFitness
New Member
5 0 0

Thank you very much @suyash1 that has worked. 

luckypets
Visitor
2 0 0

this is not working for me can someone help?

tez_brooks
Shopify Partner
6 0 0

Where do you put this code?

SiteBuilder
Excursionist
22 0 7

This is unfortunately not working for me, I tried to put that CSS in:

- the Custom CSS field of the "Image with text" menu

- the Custom CSS field of the "Theme settings" menu

- the base.css file

 

None of them work (the first one returning an error message that this css command isn't accepted there.

 

Any other idea o how to remove left and right padding from a "Image with text" section in a Dawn theme?

 

Regards