List adjusting to browser size

I want my list items to behave like the pictured section of this website: https://www.damekellyholmestrust.org/

Whenever I resize my browser, it adjusts the size of the pictured section, and I can't figure out how this is done. Whenever I think I've found a good setting using the regular list editor, I resize my browser and I get weird padding instead of it "following" my movement. 

I also want the same kind of hover on image to show text solution. Can someone help please!