Logo List
Loading "Building a Responsive Logo"
Building a Responsive Logo
Run locally for transcripts
π¨βπΌ I know I repeat myself, but... make the list of logos look like the design in Figma π
Wrapping list
π¨ Implement the correct
gap, max-width and alignment on the ul element, according to the Figma specs.π° For the
max-width, you need to look at larger screens on the design. Since we might be previewing our design on larger viewports, it's nice to already have the correct max-width set up, so it doesn't look ridiculously wide.π° Since the tiles seem to be flowing line by line and wrapping, you probably want to look into using π flex-wrap on that
ul element.Logo tile
π¨ Apply the logo tile styles on the
a element, based on the Figma design.π¨βπΌ Pay attention to the size, background opacity, border-radius and all!
π° To center the logo inside the tile, you can use make the
a tag a grid, and used our now best friend π place-items property.