Screen Resolution Anomaly

@JDL22Mar 11.2022

Hello Members of Webdeveloper.com
My wife and I need some help with an ongoing problem. I am not a professional web designer by trade – I am a singer/songwriter/producer. Nevertheless, I love graphic and web design and have actually designed many websites over the years – at first using Flash (back in the day), and in recent times mainly Bespoke using Dreamweaver CS6 and tables. I have designed in WordPress, but I still prefer the to use Dreamweaver in tandem with Photoshop. I realize my design skills are not completely up to date, but things move fast. I have my own style and I AM trying my best.
In recent years I’ve designed a site called www.glaucomarize.org as an online charity resource for people all over the world, suffering from Glaucoma and other eye diseases. My wife lost the sight in one eye and almost the other eye due to Glaucoma, so we wanted to find a silver lining and help others – especially as glaucoma is not well understood.
The site I’ve designed is using tables with deliberately large buttons, being as the site is about visual impairments and awareness. So I started with an 1900 size template designing on a large screen, but set the widths to 100%. The colours were also very carefully chosen. At every stage of the design, I would check with my wife how it looked to her, as this would give the best indication as to whether the site works. So she approved the final visuality of the site.
She can see it nice and clear on a big screen and all fits on to the screen. On a tablet, the site resizes perfectly and this is the view my wife uses. On a phone it also resizes and works perfectly if the mobile is flipped to ‘landscape’.
BUT ON LAPTOPS IT DOES’NT RESIZE. Consequently, the site is too big for the screen. WHY IS THIS? Now I looked in to ‘Fluid designs and ‘Adaptive designs’. Spent ages on it, but because it resizes for tablets and phones, I didn’t want to mess with it + I thought if I can just find a script, style sheet or piece of code to adjust it for laptops, this would be an easier option. I’ve googled it and googled it and not found a solution. Perhaps, because no one is really designing like this!?!
Our website and FB forum are helping so many people with eye problems, and much has been achieved in the last 4 years. But this web design anomaly needs to be solved – presentation is all – especially as Glaucomarize is a charity resource that’s growing. Moreover, I’ve tried to solve this issue for 2 years!
CAN ANYBODY SOLVE THIS FOR US? You will have our eternal gratitude and also our full acknowledgement.
Many Thanks – Jayl – www.glaucomarize.org
#ScreenResolution #Tables #Dreamweaver #GlaucomaAwareness #CSS

to post a comment

CSS Full-stack Developer HTML

8 Comments(s) _↴

@sibertMar 11.2022 — #> @JDL22#1643103 CAN ANYBODY SOLVE THIS FOR US?

Yes, but it is not that easy. Your site is build like I built sites last century using table layout.

This makes it harder to be responsible and fit for different screens.

Today I build web sites using these 3 "main tools"

1. **CSS Grids** (instead of table layout) https://css-tricks.com/snippets/css/complete-guide-grid/

2. **CSS Flexbox** (in combination with grids) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

3. **@media queries** (adjust layout depending on screen size) https://css-tricks.com/a-complete-guide-to-css-media-queries/

To tell you how to do, will take several months. So you have to learn this yourself or take it bit by bit and ask more specific question on this forum. Or try https://forum.freecodecamp.org courses.

And your site was very informative. Keep up the good work!

@tracknutMar 11.2022 — #As @sibert says, you do have a project ahead. Your coding methodology is at least 20 years old, and in this industry that's a couple lifecycles. The code as it stands is what's now called "quirks mode" code, that is non standard "every browser do your best to render this" kind of code. And as you say, it's developed to look good on a 1900px monitor, no smaller than that. Mobile devices over the years had to implement ways to handle quirks mode code, so you've gotten a bit lucky with that, but I have to say you're running out of time and technical twists to keep this code base working. If it were a smaller site or a single page, you could likely find someone to volunteer to update it so you could see the necessary changes, but it is a rather large site at this point.

I would recommend starting a page from scratch, with a DOCTYPE at the top and a template that meets current coding standards, and re-build your home page with the help of the community here as well as the reading suggested. It will be a good challenge :)

@SalinaSJamesMar 17.2022 — #I created a website using a three-column grid in the main section, using fr units to ensure each column takes up an equal amount of space. Each cell contains an image. I use media queries to make the site responsive, and for the most part, it works. However, for some reason, for a view port size of 750px - (roughly) 850px, only the third column shrinks, and the other two stay the same size. For every other view port size the cells and images shrink and grow in unison. Note that the break point is 750 - 1099, and until it getd to about 850 everything shrinks properly. I have tried vw units instead and that didn't help. What can the problem be?

@PhumeleleSJoseMar 21.2022 — #Can someone tell me how to increase the svarog screen or veles, I've got fucked eyes and I've checked for addons and fucked around with the fov but nothing I've done has increased it and the forums are coming up with nothing. At this stage I'm ready to mod it myself but I've got no clue on how to go about it.

@JDL22authorMar 23.2022 — #Dear Tracknut and Sibert

I am most grateful for you taking the time to check out our site and write to me. It is most kind of you. And for your encouraging comment Sibert - re: the site being informative. This is the most important thing.

I am also grateful for your honest and productive suggestions. It is clear that my design skills are well out of date, but I also actually prefer some of the retro designing!

Nevertheless, your suggestions were most helpful. In the meantime, whilst I learn some of the new skills you suggested, I have put a simple workaround solution on to the site, and it works a treat for now.

All the best

JDL 22

@sibertMar 23.2022 — #> @JDL22#1643340 Nevertheless, your suggestions were most helpful.

There IS another option. Use WordPress. Find a good template and add to WP. Fill with your content and you are up and running in a short time. Just check that your [WP theme template](https://themeforest.net/category/wordpress?utf8=✓&referrer=search&view=grid&sort=sales&gclid=CjwKCAjwiuuRBhBvEiwAFXKaNJlylf3ZRILIQlcGfSybjT8LwgTfDZcBkWkitdG2I-twe0F4BURMNBoC668QAvD_BwE) is responsive.

>I also actually prefer some of the retro designing!

Retro design can be used regardless of using ancient or modern techniques. :-)

@wajahi9045Aug 06.2022 — #hmmm okay

@Agata09Oct 04.2022 — #I usually use photoshop. I have quite a few acquaintances who are either professional photographers or are just into photography. Thanks to them, I know a little bit about the subject. I even learned their slang.

**Links removed by Site Administrator so it doesn't look like you're spamming us. Please don't post them again.**