My websites layout gets messed up when I zoom in or out! :( – SitePoint

Hello, im new to web development and i watched tutorials on YouTube and read some articles online about HTML and CSS however when i began designing my website i came across a problem which i cant seem to find help for online that would make me understand this better. I was designing my website in 90% zoom by accident and now that i noticed it i changed it back to 100% but the contents of the website are all over the place. So how can i make it so that the contents always stay in one place no matter the screen size or the zoom size.
Thank you for your help!
Source code:
The most obvious question is did any of those tutorials or videos include a treatise about coding responsive web design?
Tutorials and YouTube videos are not formal, full bodied courses. You would benefit greatly from taking a formal class in HTML and CSS and thereby learn the basics of many of the elements of web design.
Your basic premise of wanting the layout to look the same on all devices, large and small, is your greatest flaw right now. For all practical purposes, it is not a reasonable expectation unless your site is no wider than 300px on all screens.
Do you know the difference between block and inline or inline-block elements? For one thing, block elements will extend to the full width of the available space. “.container” is assigned to a div which is a block element. No width is needed for it to extend to the full width of the window. .wrapper has a fixed width of 1300px. It can never become narrow enough to fit in the window of a smartphone without generating a wide horizontal scrollbar; and .wrapper1 is 60px wider and has a fixed height. Normally, content dictates the height so it can freely extend taller at narrow widths.
position:fixed is not a practical way to layout a web page. The liberal use of IDs instead of classes is another troublesome practice for reasons of specificity. (Have you studied specificity?).
I strongly recommend that you take a formal course from start to finish, do not selectively skip chapters that do not interest you, and work all of the exercises.
i watched tutorials on YouTube and read some articles online
Do be careful where you learn from.
These days absolutely anyone can create a tutorial on a website or Youtube, but that does not necessarily mean that person knows what they are doing or are an authority on the subject, they could be as clueless as anyone.
Books may be old-fashioned, but to become a published author does require more credentials than a bit of (misguided) self-belief and an internet connection. That is not to say all on-line resources are bad, there is some good stuff out there, but it can be difficult for the beginner to distinguish the wheat from the chaff.
Without closely studying the code, just a quick scan, I can see this code is very dated and does not follow best practice on many levels, or attempt any from of responsive design.
But do not despair, there are people here who are willing to help if you are willing to learn.
Yes i am willing to learn! And i understand that tutorials online are not the best way but programming for me is a hobby so i unfortunately dont have enough time to spend on it. However for the website, i dont want this website to work on phones, tablets etc but computers so please tell me how i can make the website stay in place and thanks for your previous comments about position:fixed and inline block etc ill take a note of it.
Thank you Ronpat this was really helpful! I am implementing what you just told me.
Thank you for the advice i will put more effort into learning from credential sources rather than relying on the internet for information, thank you!
But to help me overcome this problem please can you tell me what i need to change in order for the layout to not move when i zoom in or out. I would really appreciate it thank you!
for the website, i dont want this website to work on phones, tablets etc but computers
Are you sure? Making a responsive site is exactly the answer to your problem.
RWD today is not just about mobiles and tablets, or this device Vs that device. There are so many variations in screen size in all types of devices that its best to be device agnostic and make a layout that is fluid enough to just work anywhere . Just looking at computers in isolation (which is folly today, exceeding 50% of the market) the range of monitor sizes is huge.
It’s also an issue of accessibility, many users have poor eyesight and may want to zoom in (or out) of a site, or increase the font size. RWD is the answer to this, which appears to be your problem.
So you can go ahead and make a layout that is pixel perfect on your screen, but unless it’s fluid, it is likely to break when released into the wild where you have no control over the viewer’s device or browser settings.
for me is a hobby
I started out exactly the same way, and made the same mistakes, learning the wrong things from the wrong places oblivious to a better way. When I came to these forums for help a number of people here (you know who you are :wink:) set me on the right track in how to make a site properly, and I listened because I see no point in learning how to do something the wrong way. So I have been where you are now, but have progressed.
Sorry this does not give specific answers just yet. I may look through the code more when I get time and point out problems and solutions.
Thank you so much for helping me and i understand your viewpoint on designing the website for all devices but im a beginner so i want to slowly progress into designing websites fit for all device types. But please when you or anybody gets time please direct me on how i can fix my code to incorporate a computers screen size :D. Thank you!
Hi there blackopspros328,
this may help to get you started…
I have to go out for a while so cannot provide any more code until my return.
Of course, others may provide further assistance before then. :winky:
coothead
OMG thank you soo much, what is this magic you have done? It is perfect ! Im going to use this as guidance to create an awesome website. Really appreciate the effort! Thank you!
Of course if you have time it would be really helpful to give me some pointers as to what youve added into the code that was different from mine which made the websites layout stay in focus as i want to learn. Thank you Mr Coothead!
Sorry but im stuck again, ive added an image and a form but i dont know how to format it correctly so that it says in place. Please help!
Hi there blackopspros328,
Here is the amended code, with the form added…
coothead
Thank you sooo much! I really appreciate this help !
If i wanted to transfer the CSS to an external css page how would i go about doing that as would the media=“screen” not be affected? Thanks for your help
Hi there blackopspros328,
check out the attachment, to see the relevant files and folders. :winky:
blackopspros328.zip (23.3 KB)
coothead
Thank you very much coothead this made it easier for me to understand this! Thank you
Could you please tell me what you did different in your code to make the pages stay in place? please
Guys i have started learning CSS and HTML again to go back on the points i missed like you recommended. And i’ve learnt how parts work such as the meta data attribute “width=device-width,height=device-height,initial-scale=1” which allows for the screen size to be adjusted according to the the device.
Then i began working on my website again however i came across the problem which i need help with :
The problem is that i tried to put the content of my webpage into a div and then tried to style it by adding paddings to the left and right side so the effect would be like this website : https://www.merlincycles.com/
However when i did this and zoomed out, the content of the webpage (the header, logo, form etc) also moved to the edges of the page however what i want to do is create an effect like the website provided so that when the user zooms out the website gets smaller but the content stays in place. Please try to zoom out on the website provided to get an idea.
Thank you
HTML:
CSS:
Powered by Discourse, best viewed with JavaScript enabled

source

Hire me on the World’s Leading Online Marketplace Freelancer.com to design your website. Additional services like- graphic design, virtual assistance, SEO, Data entry, etc are available. Click on This Link to start your project

Write a comment