How can I increase image width to fill the entire screen?

Store Design
,

Topic summary

A user seeks to expand an image width to span the entire screen, eliminating white space on both sides (except beside the header) on their contact page.

Two CSS solutions proposed:

  1. Direct CSS approach: Add max-width: 100%; to the .page-width.page-width--narrow.section-template--17813028241676__main-padding selector via Online Store → Theme → Edit code → Assets → base.css.liquid

  2. Conditional styling: Insert CSS targeting the specific ‘kontakt’ page handle into theme.liquid before the </body> tag, using Liquid conditionals ({% if page.handle == 'kontakt' %}).

Both methods require accessing the theme code editor. The discussion remains open with no confirmation of which solution was implemented or whether the issue was resolved. PageFly representative included visual references (images) to illustrate the implementation steps.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi there!

Do you know if I can make the image bigger so it goes from the complete left to right side and has no white space above it (besides the header)?

URL: https://taneraskin.com/pages/kontakt

Best,

Isabelle

1 Like
2

@isabellemaria

.page-width.page-width--narrow.section-template--17813028241676__main-padding {
    max-width: 100%;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

3

Hi @isabellemaria

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Layout->/theme.liquid->paste below code :

{% if page.handle == 'kontakt' %}
    
  {% endif %}

PageFlyRichard_1-1677762883338.png
PageFlyRichard_1-1677762883338.png1164×930 51.2 KB

PageFlyRichard_0-1677762857689.png
PageFlyRichard_0-1677762857689.png1751×736 166 KB

I hope it would help you
Best regards,

Richard | PageFly