How would I make the page responsive?

1

I added media queries but it didn’t seem to help much. Am I doing them right? I am having trouble with the OUR PIZZA section. I want to make the text inline with the pizza photo when the page gets smaller.

Any help is appreciated. Sorry I stored my pictures locally.

2

src="firePizza.png"
Your images are local to your computer and will not load for us. :frowning:

3

Your using max-width for your break points. I would do the opposite and use min-width. Start with your browser window as narrow as it can go and style the page so it looks good. Then work your way wider, finding the breakpoints at which you can rearrange the elements on the page. And instead of using px, consider using em instead, which will take into account both the view port width and any increases in text size.

4

Max and min are actually fine for responsive design but it needs to be used in conjunction with a page that has well defined breakpoints and responsive elements.

Your youtube video is breaking the responsive aspect of your page.

Add this
iframe {
width: 100%;
height: 56.25%;
}

In addition you have margins that are somewhat large in pixel size that will likely break responsivity when set on a 100vw/100% element. It is not at the moment but something to consider later on.

1 Like