Buttons around image not responding in the same way

Question

This is my first question.

I have an application using rails and bootstrap. When the screen goes to small, the items around the picture don't respond the same as on a medium & large screen. Take a look:

https://i.stack.imgur.com/x6uBD.jpg - Good size, everything functions well. https://i.stack.imgur.com/yr5Au.jpg - Bootstrap small size (functions badly)

I want the stars and the buttons to be below and within the width of the picture. I thought naturally bootstrap would make the buttons responsive with the picture because all of it is located within the same <div class="col-sm-4 col-md-3">

I'm currently not styling this page so no CSS needs to be added to this question.

I'm using paperclip as my image resizing gem.

<div class="row">
<% @movies.each do |movie| %>
    <div class="col-sm-4 col-md-3">                    
        <div class="thumbnail">
            <% if user_signed_in? %>
                <div class="js-rating" movie_id="<%= movie.id %>" data-rate-value=6></div>
            <% end %>
            <br>
            <%= link_to (image_tag movie.image.url(:medium), class: 'image'), user_movie_path(movie.user, movie) %>
            <% if movie.user == current_user %>
                <br>
                <div class="image-buttons">
                    <%= link_to 'Edit', edit_user_movie_path(movie.user, movie), class: 'btn btn-primary' %>
                    <%= link_to "Remove", user_movie_path(movie.user, movie), method: :delete, data: { confirm: "You Sure?" }, class: 'btn btn-primary btn-remove-main' %>
                </div>
            <% end %>
        </div>
    </div>
<% end %>

Essentially, I *think* your question boils down to "How do i make my thumbnail div be only as wide as the image within it?" ...right? — Paulie_D, Sep 17 '19 at 12:10
Well a workable example in a snippet would be useful as I indicated. — Paulie_D, Sep 17 '19 at 12:14
I made a gif and tried to downsize with 3 different tools. Stackoverflow only lets you upload 2MB. — helloiamhere, Sep 17 '19 at 12:18
Please recommend a tool and I'll be happy to use it if the file is less then 2MB — helloiamhere, Sep 17 '19 at 12:18

score 0 · Accepted Answer · answered Sep 17 '19 at 12:21

Essentially, your question boils down to "How do i make my thumbnail div be only as wide as the image within it?

Using the same technique as in this answer: Make wrapper take maximum width of child image?

.wrapper {
  border: 1px solid red;
  display: inline-table;
  margin-top: 1em;
  width: 1%;
  text-align: left;
}

.col {
  text-align: center;
}

<div class="col">
  <div class="wrapper">
    <div>&#8902; &#8902; &#8902; &#8902; &#8902;</div>
    <img src="http://www.fillmurray.com/284/196">
    <button>My Button</button> <button>My Other Button</button>
  </div>
</div>

Buttons around image not responding in the same way

1 Answers1