Change margins on image-with-text for one specific section

[Mass86]

How can I set the max-width to 100% and left and right margins to 0px on just one specific image-with-text section? I am trying to use this code but it changes all the image-with-text across my webpage. I am using the Dawn theme. 

.page-width:has(.image-with-text) {

   padding-left: 0px !important;

   padding-right: 0px !important;

  max-width: 100%;

}

please help 🙂 thank you!

[dws_pvt_ltd]

Hello @Mass86, Please follow this steps below,

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your image-with-text section file. 
5. Add the following code at the end of the file.

Append "#shopify-section-{{ section.id }}" if you want to target a section block CSS in section file.

#shopify-section-{{ section.id }} .page-width:has(.image-with-text) {
   padding-left: 0px !important;
   padding-right: 0px !important;
   max-width: 100%;
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[Mass86]

Hi!

Thank you so much! When you say "Open your image-with-text section file", which one should I open?

1. component-image-with-text

2. image-with-text.liquid

3. base.css 

[dws_pvt_ltd]

Hello please open image-with-text.liquid file if you still confused then please share preview theme with password and tell in which section you want to do it.

[Mass86]

Thank you! 

How can I find the section ID for this? I used the developer tools from chrome, and it says : 

div id="#shopify-section-template--23116326469955__image_with_text_URQTQB"

Also, when I input this into the script, should I write it like this?:

#shopify-section-template--23116326469955__image_with_text_URQTQB .page-width:has(.image-with-text)

[dws_pvt_ltd]

Hey you don't have to find the ID of your section, just append "#shopify-section-{{ section.id }}"  at line of your CSS.

Example,

#shopify-section-{{ section.id }} .your-any-class {
  /* your all css properties with values */
}

#shopify-section-{{ section.id }} .page-width:has(.image-with-text) {
   padding-left: 0px !important;
   padding-right: 0px !important;
   max-width: 100%;
}

[Mass86]

ooh ok! got it. 

it actually worked when I pasted the code on the base.css file. When I pasted the code on the image-with-text.liquid file, it just added the text to the webpage (the literal text of the code). Could you enlighten my ignorance, because I really want to learn this: How does the code know which section am I targeting when I just put "#shopify-section-{{ section.id }}" without the specific section id?

Thank you so much!

[dws_pvt_ltd]

Hello, when you write #shopify-section-{{section.id}} ,in your section file, it directly get the ID of your section which is default way of the shopify. See in the html structure when you inspect the section then it having #shopify-section-template-any-id-of-the-section. In this "shopify-section-" till this is same for all, but when you add "{{ section.id }}" after it then it will fetch the section ID from the section through shopify's default way of the code.

[Mass86]

But how does it know which section it is? I have several sections with image-with-text, and I only wanted to change 1 of them, the one that is on my homepage. the rest of the image-with-text sections I want them to remain with the original  padding and margin.

[dws_pvt_ltd]

If you have a multiple image-with-text section in the home page then you should do a duplicate section of your existing section of image with text. Just go to edit code, add create a new section with new name "custom-image-with-text.liquid". Now copy all the code from the default file of the image with text section and paste it into the custom file which you made. Now call this section in the customisation of the theme. Add content as same as you want. And now you have to put the CSS with the "#shopify-section-{{ section.id }}" at the end of your "custom-image-with-text.liquid". And now see the results with make a custom section from existing section and add your CSS in this custom file.

[Sangeetanahar]

You can go to the image with text section and remove the page width.

you can also check the video

https://www.awesomescreenshot.com/video/30566223?key=a732b90580f634f85c82277ba24e2d83

please open this link 

- Buy me a Pizza

If this was helpful, hit the like button and accept the solution.
Thanks