The 4 photos across the top don’t look good when you scale the browser down. Ideally, I’d like for them to stay side by side in the iPad landscape view, two by two and centered on the screen for iPad portrait and iPhone landscape, and then a single column, centered on the iPhone portrait view.
I’ve tried using a fixed width on the .photos div but that just seems wrong. Can someone give me a nudge in the right direction?
To do what you want you’d really need to set up media queries for the various breakpoints you mention and then change the way the items are displayed depending on the width and space available. It’s not a quick fix as you have to modify the elements in each media query but is not that difficult.
A quick fix would be to scale the images smaller with the browsers width so that they don’t drop.
These are additional styles to over-ride some styles so must follow at the end of the css.
Even better would be to use the above concept combined with media queries so that you stop the images getting to small and revert to one image wide for mobile and two for larger tablets etc.
(An easy way to test the above code out before you implement it is to install CSS terminal as a bookmarklet in your browser (just drag the link to your bookmarks and its installed) and then you can just post that code into CSS terminal and see what the changes would do to the live site without needing to change anything yet.)
Thank you so much, Paul. I’ve been messing with it for the past couple of hours and almost have it looking the way I want. The only thing I can’t figure out is why the widget titles are misplaced when I go to 100% width on the smaller devices. Do you see my mistake? They should stay absolutely positioned on top of the image while leaving room for the 10px border.
At the moment the parent with position:relative is 100% wide so it doesn’t match the image and thus the positioning is incorrect. Therefore in the media query for the smallest width, change the element to be non floated but display:inline-block instead and then it will shrink wrap the image and the position will stay intact.
Do you think the way I’ve done this is okay or do you think it’s overkill?
@media only screen and (max-width: 991px) {
.photo-1,
.photo-2,
.photo-3,
.photo-4 {
width: 24.4%;
}
}
@media only screen and (max-width: 863px) {
.photo-1,
.photo-2,
.photo-3,
.photo-4 {
width: 24.38%;
}
}
@media only screen and (max-width: 836px) {
.photo-1,
.photo-2,
.photo-3,
.photo-4 {
width: 24.33%;
}
}
@media only screen and (max-width: 776px) {
.photo-1,
.photo-2,
.photo-3,
.photo-4 {
width: 24.32%;
}
}
Technically, I would have liked to make more of these to make every single width look good, but I thought it was just too much. So, I settled on making it look good on this and then pretty good at the other widths.
It would have been nice to find a halfway house that allows widths as close as that to work through the range but sometimes percentages just don’t play ball. I would usually try and find a happy medium rather than having too many media queries but sometimes you don’t get much choice unless you can change the design.
At the moment your 4 pictures drop to 3 pictures at 730px but you only trigger your 2 across at 594px leaving some users with only 3 images across (not a big deal I know) but I would have been inclined to trigger the two across layout at 730px instead and thus avoid the issue altogether.
I tend not to think in breakpoints but simply make adjustments at the width that the design needs to change to look better at the width it is displayed.
Having said all that I think your page looks pretty good across the range
The reason I didn’t make it 2 across at around 730px is because they were spaced way too far apart and it just didn’t look good. I tried messing with the width of the .photos div to bring them closer together, but then I still ended up having to add a bunch of media queries.
Paul, may I bother you for one more thing? I decided to trigger the 4 photos instead of letting it drop to 3 and now I’m having trouble with the titles on the Android phone landscape view. If I set their width to auto, then I have just one column of photos. Do you know of a way to keep the titles on top of the photos even when they are not set to width: auto?
I’m not sure if this is the issue you are talking about (I don’t have an android phone) but if the problem is finding a consistent stacking context for the title on the image then try using the div that wraps the images as the context by setting it to shrink-wrap the image using inline-block.
