0

I recently made a pure (didn't use Bootstrap or anything else) HTML 'website' (didn't actually give it a url) on my laptop, but when I opened the website on my desktop, it looked horrible and nothing was formatted correctly (elements were too small, margins were too big or too small, etc.). What should I do to make sure my website fits on all screen sizes?

2 Answers 2

5

After re-reading your question you said it was pure HTML website. HTML is NOT where you want to do the design things, that should be done in another language (CSS3). HTML defines the content of what you want on your website, in the other hand you'll use CSS for placing, colouring, scaling and overall appearance.

From just your explanation there can be a lot of things missing as we don't really know what it is that you are doing. But if you did not take RWD considerations in mind, I'm assuming there are quite a few things that you are missing.

You should look into responsive web-design (RWD), you can find quite a bit of information about it around the web, starting with wikipedia responsive web design.

You can consult some books if you prefer: Responsive Web Design (Brief Books for People Who Make Websites, No. 4)

It's all about using relative positioning / margins instead of fixed or absolute positioning.

2
  • Thank you. I didnt use a lot of relative positioning and i used all pixels
    – michaelpri
    Dec 7, 2014 at 0:14
  • NEVER USE PIXELS! Always use em, and especially vw, vh, vmin, and vmax!
    – Jack G
    May 22, 2017 at 22:54
3

Unfortunately, there is no 'magic bullet' solution to your problem. What you are talking about is called Responsive Web Design and it takes a lot of experience to be able to efficiently design websites to look great on all screen sizes.

I recommend that you start by doing some reading on responsive web design, there are plenty of good places to get started on this topic.

Additionally, mastering HTML / CSS will help-- There is a free course that is pretty good from codecademy.com. That should get you up to speed pretty quickly.

To more directly answer your question: people most commonly use some combination of javascript and CSS media queries to resize content / DOM elements

Not the answer you're looking for? Browse other questions tagged or ask your own question.