About making website responsive and media queries

About making website responsive and media queries
0

#1

This is my portfolio.
How do I prevent the pic from overlapping when view on smaller screen??
If you open my project on mobile you will see that at the work section, those thumbnails I put right there is exceeding the limits of the webpage.
How do I prevent this from happening???

http://codepen.io/zhouxiang19910319/pen/oBZOMy?editors=1100


#2

This is would be a solution for resizing the images when it doesn’t fit in the screen anymore:

@media only screen and (max-width: 600px) {
  .work_display{
     width:100%;
     height:auto;
  }
}

You can find more details on @media here


#3

Hey, thanks for the help! I did some minor changes to my code like you suggested.
However now it still does not fall into the grey background I set.
I just want all the pic to center aligned.

How am I supposed to do that???


#4

One thing that is affecting your images is the a CSS you added for the navbar.
You should replace the a{....} for nav a{...}, so it will only apply for the navbar links.

When you’re not sure what is happening, it is a good idea to open the copepen full page, press f12 (developer tools) and inspect your elements. There you can change the CSS and understand what is changing them.


#5

Oh… wow , it worked.
Btw how do you know it was that one specificity error that caused the whole image issue???

Be honest even I know I could have written nav a {} I still won’t realise that by changing it, it will help me with the overlapping issue,


#6

Another thing I wanna ask you is this, now I am previewing my website on my own cellphone.
But I have only 1 cellphone…

How do I make sure that on other cellphones that have diff resolutions my website won’t look different? Everything won’t be off centered???


#7

I went to the dev tools, inspected your image and saw that it had an extra margin-left from your a links.

I think that there are some websites you can test. But, you can also use the dev tools and select the option to “Toogle device toolbar” in the top left corner. So it will change the size of the screen to a mobile size.


#8

Thanks for the useful tips! I will use them and start get used to them!!!