¿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:
Y este es el CSS:
Por favor ayudenme :(
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> </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
0
