1

I have a page with bootstrap div's and 2 images and buttons on the page. In full screen, the page works fine. But when I resize the page only one of the images and 1 of the 2 buttons work. The images are side by side in full screen but when they resize one is on top of the other ant the top button and image cannot be pressed. Here is the view.

<div class="jumbotron">
  <div class="center-block">
    <img src="https://s3.amazonaws.../Frontpage_logo.png"  class="img-responsive" alt="...">
  </div>
  <div class="text-center">
  <br/>
  <br/>
  <% if user_signed_in? %>
      <%= link_to 'Your Dashboard', users_dashboard_url, class: 'btn btn-primary' %>
  <% elsif manager_signed_in? %>
      <%= link_to "Your Dashboard", managers_dashboard_url, class: 'btn btn-primary' %>
  <% elsif admin_signed_in? %>
      <%= link_to "3rd Party/Supplier Dashboard", admins_dashboard_url, class: 'btn btn-primary' %>
<br/>
    <br/>
      <%= link_to 'Monitoring', sidekiq_web_path %>
  <% else %>
    <div class="container-fluid">
      <div class="col-md-5">
        <div class= "pull-left">
          <h3><strong>See how we ...!</strong></h3>
            <a href="/managers/why_use_us"><img src="https://s3.amazonaws.../manager_video.jpg" class="img-responsive"></a>
            <br>
            <%= link_to "Manager", managers_why_url, class: 'btn btn-primary' %>
        </div>
      </div>
    <div class="col-md-2">
      <div class="text-center">
        <h2>or</h2>
      </div>
    </div>
    <div class="col-md-5">
      <div class= "pull-right">
        <h3><strong>See how we are helping ...!</strong></h3>
          <a href="/users/why_choose_us"><img src="https://s3.amazonaws.../user_video.jpg" class="img-responsive"></a>
          <br>
          <%= link_to "Tenant", users_why_url, class: 'btn btn-primary' %>
      </div>
    </div>
  </div>

  </h2>
</div>
  <% end %>
</div>
SupremeA
  • 1,519
  • 3
  • 26
  • 43

2 Answers2

1

If you wish to have the images side by side without overlapping when resized, change col-md-* to col-xs-*. Do so with rest.

I hope this helps.

Hassane Fall
  • 114
  • 8
  • I actually had to use ````col-xs-12 col-sm-2 col-md-2```` to make sure it was right for each size but your answer pointed me in the right direction. Thanks – SupremeA Oct 27 '15 at 16:30
0

I hope this should work for you.

Please try this code instead of yours. i made some small changes.





See how we ...!


or

See how we are helping ...!


When we create table using Bootstrap then it should go in side the "row" class. and when you re-size the window some other element is coming above of all the screen. that's way you was not able to click images. and on the End of your code 4th line from the bottom. there is no stating tag for closing "h2" tag.

Awais
  • 169
  • 1
  • 2
  • 14