CODEWITHSUNDEEP
screenhtml
Jason W
Jason W

Reputation: 738

Webpage Discrepancies with Screen Size

I have been working on a webpage (First Day), and on one of my screens it looks like I want it. The screen size is 1920 X 1080. However, on smaller screens it looks different. How to I adjust my webpage to where it would look and feel the same on all screen sizes?

I have looked around on the internet and found places saying it's not readily possible, and others just saying it takes a lot to do this. I would like some help and opinions of what would work.

Thank you

Upvotes: 0

Views: 27

Answers (1)

Eduardo Marwell
Eduardo Marwell

Reputation: 36

First of all, for your page works fine in all resolutions you need to learn how to make responsive layouts, these layouts will adaptate himself for each resolution of screens.

Try to use percentages and display: table unless display: block (use block preferably in images).

Your text:

Begins Wednesday, October 15 at 7:00 p.m. with chili being served at 6:00 p.m.

are breaking your layout because it exceeds the height of your mainContent Div, if you change the height of mainContent div to 50% and add display: table to it, your layout don't will break anymore.

Your images are too big for screens where resolution are 1366x768 or smaller, try define the height of your images with percentages, that will make your images always will be displayed in the size ideal for screens that will be loaded.

You have three main divs: header, mainContent and footer, and you want to show your entire site without the scroll bar to appear, ok, if you have three main divs and they are the site, set the height of the divs so that they are complementary and not exceed the limits of the site, like:

header: height: 10%
mainContent: height: 60%
header: height: 30%

this is not the code that will save your life, but is the start of a new vision to make website's layout. :)

Upvotes: 2

Related Questions