Trying to get rows of 4 contacts/images in a grid like layout. To be in the centre of the screen and will reduce down (4,3,2,1) rows when shrinking the screen or using different devices. Currently have one continual row(incorrect) that does shrink image by image (correct). Have tried the -webkit this has not worked also looking at grid but this seems to static.
Is there a way in CSS to set length of a row by number i.e. break if nth count == 3 of images or a specific number of columns?
Any ideas or the best way to do this?
current code-
index.html.erb
<html>
<head><style>
body {margin:20px;}
.polaroid {
display: inline-block;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 10px;
border: 1px solid #ccc;
width: 180px;
height: 210px;
}
.polaroid:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.container {
width: 100%;
height: 100%;
text-align: center;;
padding: 10px 27px;
}
.work {
width: 55%;
height: 55%;
border-radius: 50%;
border: 1px solid black;
overflow: hidden;
padding:5px 4px;
}
</style></head>
<body>
<div>
<%if user_signed_in? %>
<%= link_to 'Log out', destroy_user_session_path, method: :delete %>
<%end%>
</div>
<% if @contacts.any? %>
<% @contacts.each do |contact| %>
<div class="polaroid" >
<div class="container">
<%= link_to image_tag(contact.image.url(:thumb), :class=>"work" ), contact_path(contact) %>
<h3><%=contact.firstname%> <%=contact.surname%></h3>
<%=contact.email%><br />
<%=contact.phone%>
</div>
</div>
<%end%>
<%else%>
No contacts yet!
<%end%>
<br style="clear:both" />
<%= link_to 'Add a contact', new_contact_path%>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire