# Magnific Popup css para mobile

**URL:** https://meta.discourse.org/t/magnific-popup-mobile-css/190452
**Category:** UX
**Created:** [14 Maio , 2021 21:37 UTC](https://meta.discourse.org/t/magnific-popup-mobile-css/190452 "2021-05-14T21:37:35Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [14 Maio , 2021 21:37 UTC](https://meta.discourse.org/t/magnific-popup-mobile-css/190452/1 "2021-05-14T21:37:36Z")

</div>

Olá,

Compartilho com você esta pequena _correção_ de CSS para o MFP, especialmente na visualização de galeria em dispositivos móveis. Com este CSS, apenas a imagem será rolada; as setas, o botão de fechar e o título permanecerão fixos, mesmo ao dar zoom e rolar a página.

Coloque este código na seção de CSS para dispositivos móveis.  
**Atualizei este código**

```
@media (max-width: 900px) {
  .mfp-container {
    position: fixed;
    overflow: auto;
  }
  .mfp-force-scrollbars {
    .mfp-figure {
      overflow: auto;
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [21 Maio , 2021 01:20 UTC](https://meta.discourse.org/t/magnific-popup-mobile-css/190452/5 "2021-05-21T01:20:04Z")

</div>

Boa observação

Fiz uma pequena alteração no núcleo com base nisso.

> <https://github.com/discourse/discourse/commit/6421fabb02f9dca00af6fb331b358af13722c8df>
>
> This commit fixes an issue where controls scroll in lightboxes with large images… (after zooming in)
> 
> Before:
> 
> https://global.discourse-cdn.com/meta/original/3X/0/5/05024730b3b877c472dff5f4d63155121d370297.mp4
> 
> Notice how controls like the close button, the next and previous button, and the image metadata also scroll? This is an undesired behavior.
> 
> After:
> 
> https://global.discourse-cdn.com/meta/original/3X/8/0/8047bab7351831e9b9df8c3cf0eb368c7529ae8a.mp4
> 
> This is the desired behavior; only the image should scroll.
> 
> The changes in this PR apply to both desktop and mobile.

Obrigado por relatar o problema e a correção @Don 👍