Jump to content
lucinka77

Website layout changes dramatically on different screens

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...