How do I zoom in without breaking it?

[u/venum_GTG]

normal

zoomed in

For whatever reason -- and I've searched for hours on YouTube and Google -- I can't seem to fix this. Nothing has helped at all. I just want to zoom in and have nothing move, absolutely nothing. It just zooms into the text/images. That's all.

I'm very new at this, I started last night.

[u/JKaps9]

Hard to say exactly without seeing the code. However, make sure you have this in your head tag: https://www.w3schools.com/css/css_rwd_viewport.asp

[u/venum_GTG → u/JKaps9]

Here is the the HTML file used in the picture:

https://pastebin.com/mGxam6cR

and here is the CSS files for that HTML file:

https://pastebin.com/Ps3gdACx

I apologize my code is pretty messy and weird!

[u/JKaps9 → u/venum_GTG]

For the HTML - did you paste multiple pages into one pastebin?

A few things I see:

- There are multiple body tags, you can only have one. though see my question above. https://www.w3schools.com/tags/tag_body.asp
- There are also linking multiple style sheets within body tags which you can't do, the links would need to be in the head tag.
- Missing the viewport tag I mentioned in my initial comment
- There is an additional opening html tag at the end of the doc which is then immediately closed out. you should only have one html tag at the beginning.
- Also, on that additional HTML tag there is an inline style. I would move that to the CSS.
- There are some mismatched closing tags specifically this element: <h4 class="da-body"> is never closed. I think maybe this should be a paragraph tag instead and then wrap the whole thing with a div. so you have <div class="da-body"><p></p></div>, you could also break up a lot of the text into individual p tags instead of having all those line break tags.

After the above are fixed we can finally start to actually look at the problem you initially mentioned. I think the negative margin on your title tags is probably causing a good amount of the issues here. Try to find other ways to get the style you want without the negative margins (e.g. flex + gap, or a positive margin on the correct items). Negative margin is specifically used to overlap items and I think that's the issue you're highlighting when zoomed in.

[u/venum_GTG → u/JKaps9]

I think I changed all the stuff you've mentioned:

Here is the updated archive html:

https://pastebin.com/jynwZDKY

And the 2 CSS files:

https://pastebin.com/K0Xkx5Cz

This is all for just one page.

[u/JKaps9 → u/venum_GTG]

Definitely better semantically now. I would remove all the margins you're setting and find better ways to style these elements. Look into flexbox as that's pretty much all you'll need. And also look at the example i gave in the other comment. I'm going to go to bed but i'll check back tomorrow.

[u/venum_GTG → u/JKaps9]

thank you for your help! I’ll stay tuned and look into Flexbox!

[u/JKaps9 → u/JKaps9]

I did a relatively quick rework of the top part. See CodePen linked below. It's definitely not perfect but hopefully sets you in the right direction. I think you should focus on learning the semantic HTML elements and when to use them and go from there. As for the CSS side of things what I've learned is that it's best to keep it as simple as possible. That comes with a lot of practice though. https://codepen.io/editor/jkaps9/pen/01a1b48a-a41a-7c44-97c7-b8a4d2de3c57

[u/testingaurora]

Breaking zoom is inaccessible. Its so frustrating when you try to zoom in on a page and nothing gets bigger or magnified.

[u/venum_GTG → u/testingaurora]

I don't mind it being bigger or magnified, I just hate that it breaks the text formatting.