Website layout changes dramatically on different screens

[lucinka77]

Hello, a complete beginner here - I have just built my first website, but to my horror I realized that if I view it with another screen resolution, or on someone else's computer, it changes the whole appearance of the site, esp. the flow of the paragraphs, often to a very ugly result. Images start to overlap paragraph, and paragraphs suddenly look extremely narrow.

 

I am happy to restructure the website, (built in html without Dreamweaver's help) but have no idea how - especially how to make the main structure adjust to different views (larger/smaller screens, i-pads etc)

Thank you! You can view the website and its source here - http://www.aidanandrewdun.com/ I'd be grateful if you viewed the page source and let me know what I've been doing wrong.

[dsonesuk]

You use specific css within style sheets for specific media type with screen size, just google css media for iphone ipad for examples

[Superbuggg]

Re: browser sizings... there's two different problems:

 

1. folk using laptop and desktop computers will have various monitor sizes set to various screen resolutions

 

2. 'Mobile' visitors to your website can be redirected to a resized index page, one with graphics made suitbale for iPads, Android etc.If you really are new to all this, I suggest a way to align stuff with basic .html code. Place all content inside a single 'table' that has it's sizing set to 99%, and it's alignment set to 'centre'. That means even if the screen res is huge, the content will always float to the centre - this only solves problem 1. for folk using computers with various monitor sizes and screen resolutions.Javascript is commonly used in webpages, and works perfectly-well wth iPhone and Android e.g. this bit of java script placed in the head of you .html index page will detect the screen resolution of whoever is viewing the page, and redirect them to a pre-made, suitably-resized page if their screen res is below 799 pixels wide. In this example mobile user's screen size is detected and they're redirected to a iPad-sized version of the index page entitled index_mobile.html This solution solves problem 2. for mobile user's screen-res problem by having a pre-made 'mobile' index page with the graphics sized-down to 800px.<script type="text/javascript"> <!-- if (screen.width <= 799) { window.location = "http://example_domain.com/mobile_index.html"; } //--></script>

 

Good Luck ms lucinka77!

[Ingolme]

You seem inexperienced with the CSS @media rule if you're suggesting Javascript and separate pages.

[thescientist]

Re: browser sizings... there's two different problems:

 

1. folk using laptop and desktop computers will have various monitor sizes set to various screen resolutions

 

2. 'Mobile' visitors to your website can be redirected to a resized index page, one with graphics made suitbale for iPads, Android etc.If you really are new to all this, I suggest a way to align stuff with basic .html code. Place all content inside a single 'table' that has it's sizing set to 99%, and it's alignment set to 'centre'. That means even if the screen res is huge, the content will always float to the centre - this only solves problem 1. for folk using computers with various monitor sizes and screen resolutions.Javascript is commonly used in webpages, and works perfectly-well wth iPhone and Android e.g. this bit of java script placed in the head of you .html index page will detect the screen resolution of whoever is viewing the page, and redirect them to a pre-made, suitably-resized page if their screen res is below 799 pixels wide. In this example mobile user's screen size is detected and they're redirected to a iPad-sized version of the index page entitled index_mobile.html This solution solves problem 2. for mobile user's screen-res problem by having a pre-made 'mobile' index page with the graphics sized-down to 800px.<script type="text/javascript"> <!-- if (screen.width <= 799) { window.location = "http://example_domain.com/mobile_index.html"; } //--></script>

 

Good Luck ms lucinka77!

 

I think you should review the paradigms and practices of responsive web design. I would personally not advocate for any of those options that you presented, IMO.