The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Need help with my Modal regarding focus and centering

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #267068


    I am using a modal to display large res versions of images when viewing on mobile. This way the user can choose whether to load the larger file as well as examine the image in more detail.

    You can see the webpage that has the problem on mobile

    The 1st issue is that my image is larger than the modal container as well as the viewport. I want it that way with the scroll bars so the user can just use their finger to move around and examine the full size image, no need to pinch/zoom.

    Because the image is larger though, I am having trouble centering it. No matter what CSS centering tricks I try, it always loads at the top left of the image.

    The 2nd problem is focus not being properly trapped in the modal.

    When I am scrolling through the high res image, sometimes there is a glitch where the user interacts with the area behind the modal? I notice it when I quickly scroll downwards. Sometimes the fixed footer menu will appear.

    I used this tutorial
    and am utilizing the overlay which I thought would prevent interaction with elements behind the modal, but like I said I still encounter the issue of the fixed footer appearing sometimes.

    Any advice regarding this would be greatly appreciated!


    You have set a max-width on the image elements to 1440px. When you change that to 100%, the image will fit your modal.
    The problem with scrolling is something that I don’t see. Is that in a particular browser?


    Hey Jeroen,

    Thanks for the reply, sorry for the slow response.

    The modal is working properly now!


Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design’ is closed to new topics and replies.