How can cross these elements so as to be responsive?

Question

I have this site:

http://avocat2.dac-proiect.ro/?page_id=25

At this point my items are centered as they wish. The only problem is that it is not responsive.

This is code HTML:

 <div class="parentVerticalCenter">
    <div class="childVerticalCenter">


    <div class="row sss">

    <div class="col-sm-4 col-md-4 col-lg-12 col-lg-offset-0" style="font-size:17px;color:white;">

        <div class="container3">
               <div class="centered">[Contact_Form_Builder id="10"]</div>
        </div>

          </div>

        </div>

  </div>        
</div>

This is code CSS:

   .container3 {
      background-color: green;
    }
    .centered {
      display: table;
      margin: 0 auto;
      background-color: red;
    }

     div[wdid="4"] {
    width: 40%;
    display: inline-block;
}

     div[wdid="22"] {
    width: 40%;
    display: inline-block;
    margin-left:-40px;
}


     div[wdid="2"] {
    width: 40%;
    display: inline-block;
}

     div[wdid="6"] {
    width: 40%;
    display: inline-block;
    margin-left:-40px;
}

If you delete this code, my elements are responsive but are not aligned properly.

 .contactform10 .wdform_column
{
width:50% !important;
}

I tried to use min-width and max width for this but does not work so take one above the other elements

Basically, my div red is divided into two equal parts, each having a width of 50%.

Can you please help me solve this problem? Items to be displayed as they are now and be responsive.

Thanks in advance!

Are you using Bootstrap? I see the col-md-4, col-sm-4 classes... — bpeterson76, Apr 10 '15 at 15:01
following the site link, and viewing source I see not only is the site using bootstrap, but it IS responsive.. perhaps you can be more specific with the question?? — Phlume, Apr 10 '15 at 15:03
One problem I see on the site is that the "name" and "phone" inputs overlap, more so on narrower screens. But that's not what you're talking about, is it? — Mr Lister, Apr 10 '15 at 15:09
I use bootstrap, here shown when resize the window...http://i59.tinypic.com/5kr0bn.jpg — i.ionel23, Apr 10 '15 at 15:14
your code is a mess and to solve all your issues we would have to re-write most of it. Please read Bootstrap docs, see how the grid system works, see how you're missing the `.container` class and how you're placing `col-*` classes at random and you'll be able to sort it out. Also, unless you're looking for something really weird, if you have `overflow:hidden` .... well, when resized, any overflown element will disappear . Fix structural issues first and you'll save lots of time — Devin, Apr 10 '15 at 15:58

score 2 · Accepted Answer · edited May 23 '17 at 12:06

Using "Push/Pull" with bootstrap will help you reposition elements in a stacked order when the screen resizes... perhaps this is what you meant?

full size:
| ITEM 1 | ITEM 2|

Smaller size:
| ITEM 1 |
| ITEM 2 |

Bootstrap discusses it here: http://getbootstrap.com/css/#grid-column-ordering

enter image description here

If this is the case, this question/answer may also assist you: Bootstrap 3: Push/pull columns only on smaller screen sizes

I use foundation (not bootstrap) and to do it in that framework you simply set up as similar to this pseudo-code:

<div id="item1" class="small-12-pull medium-12-pull large-6">lorem ipsum</div>
<div id="item2" class="small-12-push medium-12-push large-6">qwerty colec</div>

How can cross these elements so as to be responsive?

1 Answers1