How can I decrease padding in image and text sections?

Store Design

Topic summary

Goal: reduce side padding around an image-and-text section on a Shopify product page (password-protected; screenshot provided).

Access: The shared product URL initially returned 404 for a helper; access was clarified via the password page link.

Attempted fix: CSS added in theme.css to set the section’s .page-width to max-width: 100% and padding: 0 had no visible effect.

Working fix: Targeted CSS for the specific section ID succeeded. Changes:

  • .feature-row { margin: 0 2%; }
  • .feature-row__text { padding-left: 40px; }
    This reduced the side spacing as desired.

Additional suggestion: An optional media query to globally adjust layout on large screens:

  • @media (min-width: 1300px) { .page-width { max-width: 95%; } }

Outcome: The OP confirmed the second CSS solution worked. Status: Resolved.

Summarized with AI on February 28. AI used: gpt-5.
1

I need to reduce the padding in between the side of the screen and the image and text section. I’ve attached an image for reference below.

URL: https://john-pitre-fine-art.myshopify.com/products/products-night-street

Password: whuyea

shipsready.PNG
shipsready.PNG1349×564 184 KB

2

Hello @JuliaRiv

I can see “404 Page Not Found” on this https://john-pitre-fine-art.myshopify.com/products/products-night-street

Thanks

3

@Parth_Sutariya Can you try this? I’m able to access it without problem

https://john-pitre-fine-art.myshopify.com/password

1 Like
4

@JuliaRiv

Please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-template--15191644897457__text-and-image2 .page-width {
    max-width: 100% !important;
    margin: 0 auto;
    padding: 0px!important;
}

Thanks!

5

@dmwwebartisan I added the code, but there was no change.

6

Hello @JuliaRiv

You can add the below code at the end of your theme.css file

  1. Go to Online store → Theme ->Edit code
  2. Assets → theme.css
#shopify-section-template--15191644897457__text-and-image2 .feature-row__text {
    padding-left: 40px;
}
#shopify-section-template--15191644897457__text-and-image2 .feature-row {
    margin: 0 2%;
}
1 Like
7

That worked, thank you! :slightly_smiling_face:

8

Hello @JuliaRiv

Please try below CSS

@media(min-width:1300px){
    .page-width{max-width:95%}
}