Responsive Web Design - Zooming in and out


#1

Hello,
I’m having a problem with my website. When I zoom in and out using the Ctrl - and + keys on google my website does not scale properly. My problem is not it scaling with different devices, but just with the zoom capability. Here’s the CSS and HTML: https://codeshare.io/5znMzE


#2

Hi logancbruns, welcome to the forums!

Just tried zooming the page in Chromium with no problem it seems.

Could you be more specific describing the problem?


#3

Sorry I didn’t do a good enough job explaining, it’s mostly when zooming out. The header is fine, but the content and footer does not stay at the bottom. I tried making the margin a percentage to adapt to whenever it zooms in or out, but it didn’t work.


This is what the website looks like at 100% zoom.


#4

This is what the website looks like zoomed out at 25%


#5

What browser(s) are you using to test the zoom-ability of your site?

Can you post a URL to the site?

Please clarify (spell it out): what do you see that isn’t changing as expected?


#6

I’m using chrome to test the zoom ability.
I cannot give you the URL since I’m hosting it on localhost the code should be in the link in the first post.
Instead of the footer along with the container for Guides, Forums, and Versions moving up as I zoom out I want them to stay on the bottom of the page instead. So I want image 1 footer to be in the same location in image 2.


#7

Then you need to code for a “sticky footer”.

The simplest and most cross-browser compatible sticky footer can be found here:

If you are obligated to use XHTML for whatever outdated reason, you can try this (also created by PaulOB):

http://www.pmob.co.uk/temp/sticky-footer-multiple-backgrounds.htm

BTW - the HTML validator identifies 12 errors in your code. You need to validate your code as development progresses to eliminate a pileup of problems at the end.


#8

Thanks for the info, should I use just normal HTML instead of XHTML? Also the program i’m using to write my code gives me 0 errors (Visual Studio Code).


#9

I don’t see where XHTML is being used within your code so I would recommend going with the modern doctype.

I would guess that your editor might be biased in its favor, especially if it is old.
Try these. :wink:

https://validator.w3.org/nu/

https://jigsaw.w3.org/css-validator/


#10

Thank you very much I appreciate this a lot.


#11

You’re very welcome smile