This is my initial inquiry.
In the application I'm working on with rails and bootstrap, I've noticed that when the screen size changes to small, the elements around the image do not adjust properly like they do on a medium or large screen. Here are some screenshots for reference:
https://i.sstatic.net/x6uBD.jpg - Everything looks good in this size. https://i.sstatic.net/yr5Au.jpg - In Bootstrap small size, things look off.
I want the stars and buttons to be positioned below the picture and within its width. I assumed that by placing everything inside the same
<div class="col-sm-4 col-md-3">I am not applying any custom styling to this page, so no additional CSS is required for this question.
For resizing images, I am using paperclip 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 %>