-
Posts
-
Hi,
I have a client that has requested a page of photos but I can’t seem to get them to stay aligned as I would like on all screen sizes. I am able to lay them out using the advanced layout editor and they look good on my main screen, but not on other desktop screen sizes. They look correct on mobile when stacked.
Here is the page in question: http://www.dancingpotz.com/gallery/
Admin Credentials in PVT
Here is an image of how I would like the photos to be aligned:
Thank you for your help.
-IanOk, well not sure what the issue is with the shortcuts in the post tool so I will just copy the link here as is: http://www.dancingpotz.com/wp-content/uploads/2018/05/gal-layout.jpg
Hi Ian,
The last two images are different in height and so the look misaligned. Other than that, you’re very close, great job. Getting this to work the same on all screen sizes might be very tricky. Which size do you need help with?
Best regards,
VictoriaVictoria,
I wasn’t able to get the images to align like I wanted using the layout builder. I coded the layout of the photos by hand and it seems to be working pretty well. Here is what I did: http://www.dancingpotz.com/gallery
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}body {
margin: 0;
}.header {
text-align: center;
padding: 2em;
}.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 10px;
}/* Create two equal columns that sits next to each other */
.column {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 9px;
}.column img {
margin-top: 18px;
vertical-align: middle;
}/* Responsive layout – makes the two columns stack into a single column */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
</style>
<body><!– Photo Grid –>
<div class=”row”>
<div class=”column”>
</div>
<div class=”column”>
</div>
</div></body>
</html>
- You must be logged in to reply to this topic.