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
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/👍
Thanks for the resources, looks like i truly have skill issues.
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