Portfolio Page - How to make the main content fill page when small width? [Solved]

Portfolio Page - How to make the main content fill page when small width? [Solved]
0.0 0
#1

Hi,

I am working on the portfolio page challenge and I have run across a sticking point. In the example page, when the window size gets to a certain low value the center content (all his website pics, intro text etc) fills the entire width and the “body” (background) in no longer visible on the sides. I am trying to get mine to do it but can’t seem to get it to work. I tried this:

        @media(width<=1023px){
            main {
                max-width: 100%;
            }

Link to the codepen:

Any tips would be appreciated!

#2

If you are wanting the following look for wider screens:

image
image.png1618x852 54.4 KB

and the following look for when the screen size is 1023px or smaller:

image
image.png824x850 48.8 KB

then you could use the following media query:

            @media(max-width: 1023px){
                main {
                    max-width: 100%;
                }
            }
#3

Thank you Randell, that is what I am looking for. It works pretty well, with one caveat! In the example page the margins gradually reduce as the screen approaches 1023px. The margins on mine instantly “snap” away when the screen reaches this size. (I changed it in the pen so you can see what I mean)

#4

That is because your main class is defined ollows:

            main {
                font-family: monospace;
                font-size: 30px;
                max-width: 80%;
                margin:0 auto;
            }

so it will only take up 80% of the screen width until your media query kicks in at a screen width of 1023px and then you specified 100%, so it pops to 100%. If you replace max-width:80%; with width:1023px; in your main class, then I think it will accomplish what you are wanting (which I am not exactly 100% sure I understand).

#5

Yes, it works perfectly.

What I was looking for was this: As you gradually reduce the width of the window (by dragging a side) the amount of “body” showing around the main content would bit by bit reduce until the main content touched the sides of the window at which point it would match size with the window.

Thank you so much for your help!