HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Justin Riestra
Justin Riestra
4,904 Points

Help Formatting Image Grid

Having trouble figuring out how to format my image list into a four image grid that remains a grid when flexing the browser. I've included the code, any help is appreciated!

/*************** Site **************/

wrapper {

max-width: 1000px; margin: 0 auto; background-color: #000000; }

body { width: 100%; margin: 0 auto; overflow: auto; }

img { max-width: 100%; }

/*************** Links **************/ a { text-decoration: none; }

/*************** Header position **************/ header { margin: -15px auto; }

header h1 { padding-bottom: 1px; margin-bottom: 3px; }

header h5 { padding: 1px 3px; margin: 0; border-bottom: solid black 1px; }

/*************** Header Styling **************/ .header { text-align: center; color: #000000; background-color: #fff; }

.header h1 { line-height: 25px; letter-spacing: 10px; }

.header h5 { font-size: .75em }

navlist li {

display: inline-block; padding: 0 10px; }

/*************** Section position **************/ section { width: auto; padding-top: 1px; color: #fff; }

/*************** Section--image position/styling **************/

.story-photo { width: 50%; height: 25%; }

image-list li {

list-style: none; display: inline-block; padding: 0; margin: 0 auto; }

image-list p {

margin: 0; }

image-list img {

padding-bottom: 0; }

/*************** Footer position **************/

/*************** Footer text and color **************/

Justin Riestra:

Follow the instructions below for "Markdown Cheatsheet to post your code correctly.

Just from what you typed here, it appears you didn't use the "#" id selector or the "." class selector in some of your CSS code. Not sure if that's the issue, but without seeing all your code, it's difficult to tell what your problem is.