CSS - ¿Cómo optimizar lightbox en móviles?

 
Vista:
Imágen de perfil de Arturo
Val: 4
Ha disminuido su posición en 11 puestos en CSS (en relación al último mes)
Gráfica de CSS

¿Cómo optimizar lightbox en móviles?

Publicado por Arturo (4 intervenciones) el 31/03/2019 22:29:56
Hola, buen día.
A ver chicos, tengo un lightbox que en computadoras se ve perfecto, pero en móviles la experiencia es mala:

Obviamente necesito que cuando se haga scroll haya un limite y ya no pase lo del vídeo.

Este es el HTML:
1
2
3
4
5
6
7
8
9
<div class="mfp-bg mfp-ready"></div>
<div tabindex="-1" class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready" style="overflow: auto; overflow-x: hidden; overflow-y: auto;"><div class="mfp-container mfp-s-ready mfp-inline-holder"><div class="mfp-content"><div class="su-lightbox-content" id="dato-conversiones" style="display:none;width:60%;margin-top:60px;margin-bottom:60px;padding:40px;background-color:#FFFFFF;color:#333333;box-shadow:0px 0px 15px #333333;text-align:center">
<h3>Aumenta tus conversiones porque:</h3>
<p style="text-align: left;">Su objetivo es <strong>mejorar el contenido de una página web</strong> y poner a la mano del usuario medios para realizar determinadas acciones y así lograr que se conviertan en suscriptores o lo mejor, en clientes.<strong><br>
</strong></p>
<p style="text-align: left;">En pocas palabras,<strong> te ayudan a que tus visitantes no se vayan de tu página sin haber hecho nada.</strong></p>
<p style="text-align: left;">El ejemplo más claro es un formulario de contacto con el que le puedes invitar a que te dejen sus datos, ocupándolos para un estudio de mercado o en tu CRM.</p>
<p>&nbsp;</p>
<p></p><button title="Cerrar (Esc)" class="mfp-close" type="button">×</button></div></div><div class="mfp-preloader">Cargando...</div></div></div>

Y este es el CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
.mfp-bg {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8;
}
.mfp-wrap {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden;
}
:focus {
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
/*@media all and (max-width:900px)*/
.mfp-container {
    padding-left: 6px;
    padding-right: 6px;
}
.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    padding: 0 8px;
    box-sizing: border-box;
}
.mfp-auto-cursor .mfp-content {
    cursor: auto;
}
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto;
}
.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}
.mfp-content .su-lightbox-content, #su-generator .su-lightbox-content {
    display: block !important;
}
.su-lightbox-content {
    position: relative;
    margin: 0 auto;
}
.su-column-inner > *:last-child, .su-tabs-pane > *:last-child, .su-accordion > *:last-child, .su-spoiler-content > *:last-child, .su-service-content > *:last-child, .su-box-content > *:last-child, .su-note-inner > *:last-child, .su-expand-content > *:last-child, .su-lightbox-content > *:last-child {
    margin-bottom: 0px;
}
.mfp-close-btn-in .mfp-close {
    color: #333;
}
button.mfp-close, button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation;
}
.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0px;
    top: 0px;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    padding: 0 0 18px 10px;
    color: #fff;
    font-style: normal;
    font-size: 28px;
    font-family: Arial,Baskerville,monospace;
}
button, select {
    text-transform: none;
}
.mfp-s-ready .mfp-preloader {
    display: none;
}
.mfp-preloader {
    color: #ccc;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044;
}
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

Por favor ayudenme :(
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de santi
Val: 71
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

¿Cómo optimizar lightbox en móviles?

Publicado por santi (27 intervenciones) el 03/04/2019 01:23:36
Hola,

¿el lightbox lo has creado tú?

La verdad que no me he leído todo el contenido pero si es el caso crea un lighbox padre y dentro un hijo:

1
2
3
<div id="lighbox">
    <div class="hijo">el contenido</div>
</div>

Y en css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#lighbox {
    position: fixed;
    width; 100%;
    height: 100%;
}
#lighbox .hijo {
    position: absolute;
    max-width: 500px;
    min-height: 350px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

Esto es para centrarlo...

No deberías tener problemas si tienes las meta tags para responsive..

Si no lo has creado tú, dinos de qué plugin se trata.

Prueba y nos comentas ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar