Full width / Image with text block ( Symmetry theme)

[Luviend]

Hi,

Is there somebody out there who has any code I can use for the image with text section, so I can get the image to be full-width? Any help is much appreciated. I have added an image for more preferences

[AndyX]

Hi there,

To make the image in the “Image with text” section stretch full‑width across the page, you need to override the built‑in .page-width container that Symmetry uses to constrain sections. A few options:

• Use a different section: The “Image banner” or “Slideshow” sections in Symmetry are already designed to span the full width. You can add those sections to your page and configure them instead of the image‑with‑text block.

• Customize the existing section: In the image-with-text.liquid section file, remove the page-width wrapper or add CSS to make the image container full width. For example, you can add custom CSS in theme.liquid or the “custom CSS” option in Theme Settings:

  /* make Image with text section full width */  
  .image-with-text .page-width {  
    max-width: none;  
    padding-left: 0;  
    padding-right: 0;  
  }  
  
  .image-with-text .image-with-text__media {  
    width: 100%;  
  }  
  
  .image-with-text .image-with-text__media img {  
    object-fit: cover;  
    width: 100%;  
  }  
  

  This removes the width constraint and forces the image container to be full width. You may need to adjust padding/margins to align the text.

• Create a custom template: Duplicate image-with-text.liquid as a new section in your theme editor, remove the {{ container_start }} and {{ container_end }} calls or change the markup to avoid the .page-width wrapper.

Remember to backup your theme and test the changes across different screen sizes before publishing. That way you avoid layout issues. If you are not comfortable editing code, you can also hire a Shopify Expert to help.

[tim_1]

“Use a different section” is the only proper advice.

Yes, you can stretch the image to cover entire screen width instead of just half, but it will become fuzzy as theme code was designed to fetch image sized to cover half of the screen and you’d need to edit theme code to change this.

I do not recommend theme code edits unless absolutely necessary – it will make theme version updates difficult.

Also, for the task like this you can have some fun with Sidekick to create the AI-generated section to fit your requirements.
Keep in mind that this is an interactive process – you can ask AI to amend the code until you hit the save button.