Design an article to make it responsive.

salvi992

Hello again.

I have a new question. But I think it's not very difficult.

My test web page has an article whose pathway (breadcrumbs) is Inicio-> Actividades-> Temporada 2017-2018 -> Actividades con profesorado. It has a big blank space in the middle of the page. I had to put it like that because it's not seen properly on mobile phones. How can I remove it or fix it? The article is made with BS3 grid (rows and div classes). My goal was to do something similar to the home page module (home-4) but a bit modified to put a video inside the article.

Perhaps there is an easier way to get it. I don't like floats next to text. It's too close to text.

Best regards.
Salvador.

aman204

salvi992 Can you provide direct link in order to see the relative issue

salvi992

This link:

http://livelysport.es/index.php/es/felicidades/temporada-2017-2018/actividades-con-profesorado

It's not really an issue. It's only a matter of appearance.

Thanks in advance.

Salvador.

aman204

salvi992 I can see several p tags added in article due to which gap is created. You can remove them in order to remove the gap. Ref: Screenshot

My goal was to do something similar to the home page module (home-4) but a bit modified to put a video inside the article.

Not too sure as to what you wished to achieve. To avoid confusion or ambiquity, You could provide in screenshot marked with annotations showing what you want to achieve

salvi992

Hello aman204

Yes. The <p> tags were a quick solution to get a correct visualization in a mobile device. But it's not a good solution as you can see.

In a few minutes, I'm going to provide a screenshot.

Thank you very much.

Regards.
Salvador.

salvi992

I hope this can help you, aman204. Perhaps, the screenshots are very large. In this case, I apologize.

aman204

salvi992 To get it right in responsive mobile mode, You can remove p tags as suggested earlier and instead, try add this to custom.css file and adjust height value accordingly:

@media screen and (min-device-width: 320px) (max-device-width: 470px){avPlayerWrapper.avVideo{height:300px !important;}}

salvi992

OK. I'll try it. Later, I report results.

salvi992

It doesn't work ...

I've removed the <p> tags. Now, You can see the behaviour in mobile mode. (Overlapping). It must there be another easier way to get what I want.

Greetings.
Salvador.