Elements not scaling to the viewport size

HTML-CSS
1

Tell us what’s happening:
I am trying to create a text inside of my image and I used relative and absolute positioning. However, whenever I zoom in the page or view it on a different device the text seems to stay massive while the image appears smaller. How do I make sure the text inside the image looks normal and centered?

I’m also trying to create two rows of circular photos and I don’t know how to do it.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36

Challenge: Build a Tribute Page

Link to the challenge:

2

You have a lot going on here so one thing I’d suggest is you make a universal selector with the following declaration, border: solid 1px red;, so you can see how you have your elements set up

You’ll likely have other questions but this will help you organize a bit better

1 Like
4

Okay I just did that. I still can’t seem to understand what’s wrong with it.

5

As you can see here the elements look all funky. I don’t know what I’m doing wrong.

image
image1920×874 133 KB

6

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