Tribute Page - Responsive Webpage Problem

HTML-CSS
1

Hello, I’m trying to make my webpage responsive but I think I’ve created too many media queries and the image on the second section stretch too much

How can I make my webpage responsive with less media queries and reduce the image size without affecting it?

Here’s my pen : https://codepen.io/sendzixbt/full/mdmezvZ

2

Hey!
I think the reason you had to use this many media queries to different sections of the webpage is because you are using wrong units to style them. I would recommend you to use the rem units as they set the font-size of the element relative to the font-size of the root element which in most cases is the html element.

When you hit a break point you will only need to modify the root element and all of the other elements will change accordingly.

so for example if you have a h1 and a p element in your page which you want to add media queries to, you could do something like this.

if the root font-size is set to 16px then if i want to set my h1 to 32px on large screen sizes, 24px on medium screen sizes and 20px on small screen sizes, all i would need to do would be this.

the p element would be first set to 16px, then 12px and then 10px;

html{
  font-size: 16px;
}

h1{
  font-size: 2rem;
}

p{
  font-size: 1rem;
}

@media screen and (max-width: 1120px){
  html{
    font-size: 12px;
  }
}

@media screen and (max-width: 1120px){
  html{
    font-size: 10px;
  }
}

if you wanna learn more about rem units i would recommend you to watch this video.

Hope this helped! :slightly_smiling_face:

1 Like
3

@sendzixbt, on a side note do not use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?

1 Like
4

Hi, thanks for your help @staranbeer and @Roma! I watch the video and I have only two media queries now.
Do you have any tips to stretch image without losing quality?
Here’s my pen : https://codepen.io/sendzixbt/full/mdmezvZ

5

The issue you are having right now is that the <a> wrapping the image is only stretching horizontally because it is an inline element. Change the display to block and then the image will expand properly.

1 Like
6

Thanks a lot, my page is now responsive! :sunglasses:

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.