Responsiveness quirks

I have two issues that are starting to show up now that I’ve got my site to where I want it.

  1. I’m using a grid to show thumbnails for project pages on my homepage, and I’ve set up widths at each break point, and I like how that looks, but as I resize a browser window I don’t like the way they jump to smaller sizes at the breakpoints. Is there a better way to handle this than what I’ve done?

  2. I want my nave to align to the edges of the grid, and I’ve tried a few different ways but can’t get it to be consistent at all break points, I know I’m missing something obvious but I can’t figure it out.

Any help would be appreciated. I feel like there’s something big picture I’m missing.

https://davids-portfolio-starter-317305.webflow.io/


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey David (@davidreidfive),

There are a couple of ways to get the desired effect.

Using grid would be the easiest way to implement what you want, as grid is by default responsive.

The reason that your nav doesn’t line up with your images is due to the padding on the ‘Item’ element (which you have used to get your spacing between the four images.

If you’re not sure how to use grid, I can make a quick video for you.

Keiran