Responsive articles.

salvi992

Hello. I have an article with the following content (in HTML). I want the article to be responsive. I know that the template is totally responsive. But sometimes, content can spoil that.

I need two rows with 2 columns each.

The first row has an image and a video.
The second row has a list with pdf links (links not avalaible yet, it's only a test) and a piece (paragraph) of information.

In a mobile device must be in a single column, of course.

I have not a big problem (though it could be better) on normal screens. But in a mobile view, second row content overlaps the first row content. I don't know why and how can this be fixed.

I have the following code.

<div class="row">
<div class="col-xs-12 col-md-6 col-sm-4">
<p>{modal url="images/actividades/verano/2018/cartel/cartelverano18.jpg"}<img style="float: left;" src="images/actividades/verano/2018/cartel/cartelverano18.jpg" alt="cartelverano18" /></p>
<p>&nbsp;</p>
<p>{/modal}</p>
</div>
<div class="col-xs-12 col-md-6 col-sm-4">
<p>{mp4}ClubNautico{/mp4}</p>
</div>
</div>
<!-- FIN PRIMERA FILA -->
<div class="row">
<div class="col-xs-12 col-md-6 col-sm-4">
<p><span style="font-size: 12pt;"><strong><span style="color: #3366ff;">INSCRIPCIONES A PARTIR DEL LUNES 18 DE JUNIO</span></strong></span></p>
<p><strong>Información General</strong></p>
<p>&nbsp;</p>
<p><img src="images/iconos-aplicaciones/pdf_icon.gif" alt="" />Normativa Inscripción</p>
<p><img src="images/iconos-aplicaciones/pdf_icon.gif" alt="" />Calendario de Actividades</p>
<p>Pabellón Municipal de Deportes Parque Almirante Laulhé</p>
<p><br /><img src="images/iconos-aplicaciones/pdf_icon.gif" alt="" />Información por Actividad</p>
<p>Piscina La Magdalena</p>
<p>&nbsp;</p>
<p><img src="images/iconos-aplicaciones/pdf_icon.gif" alt="" />Información por Actividad</p>
<p>Ciudad Deportiva Bahía Sur</p>
<p>&nbsp;</p>
<p><img src="images/iconos-aplicaciones/pdf_icon.gif" alt="" />Información por Actividad</p>
</div>
<div class="col-xs-12 col-md-6 col-sm-4">Para más información puede dirigirse a:
<p>Oficina de Atención al Usuario Ciudad Deportiva Bahía Sur<br />Dirección y contacto: Caño Herrera, s/n Teléfono: 956 10 57 58.<br />e-mail: <a href="mailto:ciudaddeportivabahiasur@aytosanfernando.org">ciudaddeportivabahiasur@aytosanfernando.org</a></p>
<p>Oficina de Atención al Usuario Piscina La Magdalena<br />Dirección y contacto: Avda. San Juan Bosco, s/n (La Magdalena) Teléfono: 956 94 65 58.</p>
<p>Oficina de Atención al Usuario Pabellón Parque Almirante Laulhé<br />Dirección y contacto: C/ Doctor Revuelta Soba, s/n (Parque Almirante Laulhé) Teléfono: 956 88 93 69.</p>
</div>
</div>
<!-- FIN SEGUNDA FILA -->

Thank you very much.
Salvador.

salvi992

Hello. I have discovered that if I remove the following line (without changes in divs), there is not any problem.

<p>{mp4}ClubNautico{/mp4}</p>

So I suspect that the problem is really the video and the extension AllVideos. Can it be solved ?

Then, I think you could do very little in this case. If you know any solution to this situation, let me know. Or provide me an alternative solution.

Regards.
Salvador.

aman204

salvi992 So I suspect that the problem is really the video and the extension AllVideos. Can it be solved ?

As the relative issue relates to coding structure of specific modules which are loading into article via the syntax, You may wish to contact specific 3rd party extension support. There might be media query css needed in order to make specific modules responsive in order to include a block of CSS properties to make specific module mobile-friendly or to adapt to specific responsive screen sizes at certain breakpoints

salvi992

OK. Thank you very much. aman204.

I don't have time and neither skills to do that, so I will search a way to insert the video in a not disturbing position.

Regards.
Salvador.

teitbite

salvi992 Hi. I would suggest using some website developer tool, like for example Firebug. This will help You check to determine what css to use and maybe even where. Also will be possible to check changes on the page directly while replacing/adding new style.

paulus1031

Hi Salvador,

I can't see the page due to a 404

Cheers
Paul

cineasta

Hi Salvador, you can do that using CSS and Media Queries. If you still know nothing about CSS you can watch some video that will help you to fix this, it's not so difficult.