HTML elements incompatible with different device resolution

When the site is viewed on 100% zoom (normal) the site is perfectly fine, but when trying to view the website with developer tools (f11) emulator, the site elements are not positioned well or as intented. I need help with the positioning of my html elements so that it supports on multiple devices with different screen resolution/dimension. https://codepen.io/Lithundir/pen/BavgYJz -- some assets won't load cause its local file https://www.youtube.com/watch?v=WIR73untges
3 Replies
Zoë
Zoë13mo ago
It's because all of your content is position: relative with some images being left: 300px and left: 1200px and text being left: 20% and left: 60%. Percentages work when resized, pixels don't This is a bad way to lay out your content and you shouldn't fix it by making everything a percentage For layout you should look at Flexbox and Grid https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-grid/
Duck
Duck13mo ago
👍 Thanks for the resources, looks like i truly have skill issues.
Zoë
Zoë13mo ago
Using CSS is a constant learning process. It's unlike any other language. You can master most language, you can at the very most be pretty decent with CSS. Especially with how much CSS changes everyone has blind spots and you can't expect perfection from everyone (I took a multi-year break from CSS due to mental health issues and I feel like I've regressed a lot). There's lots to learn (far more than any other language) and it's not always obvious whether you've done something wrong if it looks fine
Want results from more Discord servers?
Add your server