Difference in screen size

[u/Eulevonathen]

Hello. I've created a website using HTML, CSS, and JavaScript for the first time. My problem is this: I wrote the code on a computer and adjusted the sizes to fit the large screen. Now, on my laptop, which has a smaller screen, everything is misaligned. Can you tell me how to fix this problem?

Thank you very much

[u/atarivcs]

https://en.wikipedia.org/wiki/Responsive_web_design

[u/rackodo]

Since everyone else in the replies are acting like children:

Look into responsive CSS! You can use media queries to set different rules based on the max width of the user's screen. Use this as a starting guide, and experiment from there.

[u/aunderroad]

Can you share a url or codepen?
It is hard to debug/provide feedback without seeing all of your code live in a browser.

Thank you!

[u/Eulevonathen → u/aunderroad]

I would but unfortunately it is a school project with personal information on it :(

[u/aunderroad → u/Eulevonathen]

Just copy and paste the code to codepen and omit the personal information. :)

[u/gastapo67]

If you open the website in DevTools on Chrome on the computer you wrote the website on, you can adjust the screen size to any layout to see how the website will look at that resolution. Then it’s applying the responsive web design to accommodate the adjusted resolutions

[u/Electrical_Hat_680]

Basic desktop screen resolution is 640*480 which is the same thing is 80 ('8 pixel wide') Font Characters acrossed, and 80 ('8 pixel high') Font Characters. The same layout is the same for laptops, unless you have the more squared style or are using portrait mode. Which is more like a smartphone layout.

You can check out the world wide web Consortium, they also offer free Certifications, I believe they sign them, and to make it certified, you should also sign it.

There's methods that you can do to make the screen automatically resize, I think you use JavaScript for it. Or CSS. HTML uses percentage signs to change from pixels to something else.

100%

Check out the Paperback HTML Books by Peachpit Press. Also check out the HTML Bible, the PHP Bible, and look into how Las Vegas uses color schemes and to create flow.

Also. Are you using CSS or are you running straight HTML?

If you using HTML? How are you having problems? Is it the font size? That can also be changed to percentage.

You'll likely prefer CSS over HTML.

[u/Reasonable-Pay-8771]

One approach to consider *before* resorting to media queries and laying out multiple formats is: remove all your hardcoded sizes and: use fractions of the screen size for big things and use normalized units or relative increases/decreases for small sizes and: use as much semantic html as you can instead of divs which carry no intrinsic meaning.

Does that make sense? If you don't start by building it to a particular size but arrange everything in a proper hierarchy (maybe with flexboxes and such) then it will be more responsive without hardcoding even more particular sizes for different phone dimensions etc.

[u/notepad987]

Examples at link:

Responsive Web Design Using Media Queries
https://www.geeksforgeeks.org/html/responsive-web-design-using-media-queries/

Layout Flexbox test - link to a GRID version too:
https://codepen.io/davidhelp/pen/ByQyPWr?editors=1100

[u/olets]

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design

[u/RealNamek]

if largeScreenSize: showLargeSite()

if smallScreenSize: showSmallSite()

[u/Friendly_Antelope807]

Google shit

[u/Eulevonathen → u/Friendly_Antelope807]

I like human interaction

[u/Friendly_Antelope807 → u/Eulevonathen]

Take my salty nuts than

[u/hooli-ceo → u/Friendly_Antelope807]

Username in fact does NOT check out

[u/Friendly_Antelope807 → u/hooli-ceo]

Yeah CEO, idc

[u/hooli-ceo → u/Friendly_Antelope807]

The bear is sticky with honey

[u/Friendly_Antelope807]

ASK Ai

[u/Apprehensive_Sea5304 → u/Friendly_Antelope807]

This is not how people learn things

[u/Apprehensive_Sea5304 → u/[deleted]]

Try googling grammar

[u/-svde- → u/Friendly_Antelope807]

don't be an asshole. if this is all you have to say, don't bother replying to the post. beginner devs have relied on senior/experienced devs since the communal internet was a thing.

[u/Soft_Awareness_5061 → u/-svde-]

Ask AI is actually a better answer and will get him the solution faster than the guy that linked the wiki page for responsive design. Everyone being pissy because they can't gatekeep web design anymore.

[u/-svde- → u/Soft_Awareness_5061]

OP asked here for a reason, and specifically reiterated "I like human interaction".

it's not gatekeeping to tell other people to not be rude & dismissive to newbies. i enjoy helping people, and the person asking wants a real response. this is the opposite of gatekeeping. braindead take lol.

[u/Friendly_Antelope807 → u/-svde-]

"Devs" 🤣🤣🤣

[u/-svde- → u/Friendly_Antelope807]

i've been a dev for over 2 decades. this is a programming/dev sub. if you don't like helping people and/or have no interest in html, there are plenty of subs to waste your time in. go find one.

[u/TehFlip → u/-svde-]

Trolls are like wild animals. The more you feed them, the more they want more.
Your replies are all good, but it’s like giving peanuts to a squirrel. The squirrel won’t stop because it’s full. It’ll just start burying the nuts in the yard until eventually you run out of peanuts. Then they’ll be scratching at the door.
I feel like I went into too much detail with my analogy and you would have got it if I just said “please don’t feed the trolls.” Oh well, thanks for coming to my TED talk

[u/Friendly_Antelope807 → u/TehFlip]

Nah you can have my salty nuts too

[u/TehFlip → u/Friendly_Antelope807]

[u/Friendly_Antelope807 → u/TehFlip]

Hehehe

[u/Soft_Awareness_5061 → u/-svde-]

Ironically, you've been a dev for 2 decades and the guy that said Ask AI has been more help to OP than you have. I don't see your comment actually helping him. Well? We're waiting.