0

I have a page http://spitzpomeranian.com/fr/?option=com_rsform&view=rsform&formId=5

with 2 div: - one on the left display iframe youtube, - one on the right display a form

On desktop view it is fine, but when I reduce my window to see the responsive view, the form on the right doesn't go under my youtube video, but it goes behind!

Any CSS expert could explain me how can I get that done please?

I search solution o google and tried many things without success.

Thanks in advance.

Nino
  • 129
  • 1
  • 2
  • 12
  • Can you post some of the code? – andnowchris Mar 28 '16 at 19:12
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Mar 28 '16 at 19:13
  • Also, the size of iframe youtube is not adjusted while the width of window is reducing. How can it be adjusted please? – Nino Mar 28 '16 at 19:16

1 Answers1

2

It seems as your page is already using Twitter Bootstrap (I've viewed the source of the page) but you're not taking advantage of Bootstrap's responsive column layout.

You currently have these 2 elements:

 <div class="div_image_homepage_left"></div>
 <div class="div_image_homepage_right"></div>

I recommend removing the current css properties you already have for them (i.e float, display, position, etc) and using the following:

<div class="row">
     <div class="div_image_homepage_left col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
     <div class="div_image_homepage_right col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>

This will make them take 50% on large and medium size (6 columns out of 12 columns) screens and 100% on small and extra small screen sizes (12 out of 12 columns).

Read more about Bootstrap grid system here

Hope this helps.

dev7
  • 6,259
  • 6
  • 32
  • 65
  • I forgot to ask about resizing of iframe? Do you have any idea? Because actually the iframe keep same size. How to autoadjust the width? – Nino Mar 28 '16 at 19:57
  • Did you try setting it's CSS width to 100%? or you can look at this question - http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width – dev7 Mar 28 '16 at 20:10
  • 1
    @Nino if this resolved your original problem, please mark as correct answer. – dev7 Mar 28 '16 at 20:32