Fixed Image on Image with Text Section on mobile.

Store Design

Topic summary

A user is experiencing issues with a fixed-position image in an “Image with Text” section that works correctly on desktop but malfunctions on mobile. The image should overlap into other sections while maintaining its position, but on mobile devices it enlarges and becomes stuck on screen after scrolling.

Current Problem:

  • Desktop: Image stays fixed and overlaps properly into adjacent sections
  • Mobile: Image initially loads correctly but then enlarges and remains stuck during scrolling
  • Custom CSS uses position: fixed with specific dimensions and positioning

Proposed Solution:
A community member identified several drawbacks with the current approach:

  • Creates unwanted horizontal scrollbar
  • position: fixed behaves inconsistently across browsers/devices
  • Doesn’t scale properly on wide monitors, creating gaps

An alternative CSS solution was provided using position: absolute with viewport-based width calculations (50vw) and media queries for mobile responsiveness. This approach is more compatible but still has minor scrollbar issues on Mac desktop.

Status: The issue remains unresolved. The responder suggests starting with a different full-bleed section type instead of the current approach.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am currently dealing with the image with text section. I am using custom css, specially the fixed position. Here is my custom css:

img {
position: fixed;
height: 100%;
width: 100%;
left: 20%;
top: 10%;
}

This code works perfectly on desktop. But on mobile after a second the website loads and you scroll past the image, the image enlargers and gets stuck on the views screen no matter where they scroll.

It is important that I use the fixed position, because it allows the image to overlap into other sections. Which lets my website flow better.

What is should look like:

Screen Recording 2025-04-22 at 2.39.27 am (1).gif

(see how the hand overlaps into the testimonials and stays in its fixed position) - this is what should happen.

what actually happens:

ScreenRecording_04-22-2025 00-23-12_1.gif

(see how the hand loads good at first, but then gets enlarged and stuck on the screen when the user scrolls) – this is what should not happen.

website: zerohoursupplements.com

Again, it is crucial that the solution still allows the image to overlap into different sections.

Any help is appreciated,

Thank You!

1 Like
2

its working fine did you resolve it or still need any help

3

It is still not working on my end, did you use mobile? and if so on what device?

4

Your solution has some drawbacks:

First, it introduces the horizontal scroll bar which is not the best. And using rules like body { overflow-x: hidden } to mitigate this is not the best too.

Second, position:fixed is meant to work like it does on your mobile – stick image to the screen, rather then to parent element. Some rules applied on elements parents may prevent it from sticking to screen, but these are rather exclusions or quirks; this is why it works on your desktop computer, but not on mobile – some browsers may ignore these quirks.

Meaning your approach is not very compatible.

Third – it does not really work on wide monitors – see the gap on the right:

Screenshot 2025-04-22 at 7.44.39 PM.png
Screenshot 2025-04-22 at 7.44.39 PM.png1451Ă—907 106 KB

One of the approaches I tried is to use this code in “Custom CSS” rather than what you have currently:

img {
  --left: 0rem;
  --top: 10rem;
  left: var(--left); 
  top:  var(--top);
  width:  calc(50vw - var(--left));
  height: calc(50vw - var(--left));
  max-width: none;
}

@media (max-width: 750px) {
 img {
    top: 0;
    width:  calc(100vw - var(--left));
    height: calc(100vw - var(--left));
  }
}

.image-with-text__media {
  overflow: visible !important;
}

The code build on top of the original position: absolute and will be more compatible. The width based off 50vw (which is half of the screen width), so the image will cover half of the screen, no matter how wide it is.

This works almost good, except on Mac desktop, where it adds a small horizontal scroll due to the way scroll-bars are implemented.

To avoid this, i’d rather start from a different section which is full-bleed initially, not sure what’s available on your theme.