Title: Improving a Responsive Photo Gallery – Any Pro Tips?
I'm building a responsive photo gallery using best practices:
•rem units
•responsive images
•max-width for layout
Any suggestions to improve it ? Would love to hear advanced tips or creative ideas!
Codepen link:
https://codepen.io/Myra-Gull/pen/pvJxexO?editors=1100
10 Replies
Look into the 8 point rule for values like font-sizes, margins, paddings... pretty much everything
Cieden
What are spacing best practices (8pt grid system, internal ≤ exte...
In 9 mins, our Karyna Khmelyk explains how to use an 8pt grid system and the internal ≤ external rule. A must-read for anyone looking for the best spacing practices.
Doesn't have to be 8, the point (no pun intended) is to be consistent
Personally I increment by .125 or 1/8ths
Thanks! I'll check it out
instead of
<div class="img"> use <picture>
what if the width of the device isn't 100vw?
when you rotate the phone, there's buttons on the sides and what not
use 100dvw or 100% instead
consider using em for paddings and margins
<p class="title">Wireless Headphones</p> <-- sounds like an <h2>anything with
width: 100vw will cause overflow on devices with fixed scrollbars, like windows + chrome... (dvw won't fix that)
You can remove that line, the container is already taking up the full width anyway, it's a block element🙂
i forgot that block elements are already 100% width
for the
.desc, consider using text-wrap-style set to pretty or balance
the alt text is also pretty unusable
"watch-image"
imagine you're blind or the image doesn't load
all we see is that: watch-image
at least add some italic, so the alt look out of place