two columns and keep responsive layout

  • Hello,

    I just started using this theme and really appreciate how responsive it is on different screen sizes. I would like to have a page with two columns that has a picture and a description sid-by-side. Unfortunately, tables messes with the responsiveness and div messes with the css code and the responsivness.

    Do you have any advice that is specific to this themes attributes so that I do not lose responsiveness and still have a two column page that on a smaller screen goes to one column?

    Best,
    Alexandra Maxim

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello @alm367,

    If you want 2 columns you can try next HTML code:

    <div class="col-md-6">
   First Column Area
</div>
<div class="col-md-6">
   Second Column Area
</div>

    Let me know if this is working for you.

    Best Regards

    Thread Starter alm367

    (@alm367)

    Great, that worked perfectly.

    Is it possible to center the video vertically and/or horizontally?

    https://bdl.pitt.edu/research/cervical-spine-research/

    Above is the page I speak of.

    Best,
    Alex

    @alm367 for vertical align i think you need to wrap every:

    <div class="col-md-6">

</div>
<div class="col-md-6">

</div>

    Like next:

    <div class="col-wrap">
   <div class="col-md-6">

   </div>
   <div class="col-md-6">

   </div>
</div>

    And add some CSS like:
    div.col-wrap { vertical-align: middle; }

    This is only for reference and it may not working, you will need to figure it out how to align it vertical / horizontal.

    Best Regards

    • This reply was modified 7 years, 8 months ago by jerryscg.
    Thread Starter alm367

    (@alm367)

    So, the code above does not work for multiple columns, i.e. 4 rows x 2 columns. 

    <div class="col-md-6">

</div>
<div class="col-md-6">

</div>
<div class="col-md-6">

</div>
<div class="col-md-6">

</div>
<div class="col-md-6">

</div>
<div class="col-md-6">

</div>
<div class="col-md-6">

</div>
<div class="col-md-6">

</div>

    Does not produce a 4 by 2… do you have any suggestions?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘two columns and keep responsive layout’ is closed to new replies.