Hi guys.
Ive just finished my webpage, but the last thing i need to solve is the problem with resolution.
I dont know if im entitled put a name of its here, but I guess it could be helpful -
Mainly, I’ve created my website on 1920x1080 on my laptop and it seems to work well on another computers, but for responsiveness I use zoom from css to make a page smaller
Basically, My media queries look like this:
Unfortunately that should have been the first thing on your list and not the last
I’m afraid that using zoom is not a viable approach and not supported cross browser anyway. You don’t simply want to make your page smaller on smaller screens and indeed in some cases you should be enlarging text for mobile because it is harder to read on a small screen.
What you should be doing is re-organising the content to fit better on smaller screens rather than just squashing it although for images you can scale them smaller as long as you maintain aspect ratio.
At present you have a horizontal scrollbar on the viewport from about 1130px downwards which will kill any mobile screen as they will need to stretch to accommodate the width of that scrolling section resulting in pages squished to one side. You need to ensure that you never get a horizontal scrollbar on the viewport at any screen width down to 320px, Just make your desktop browsers wider and smaller (grab the edge of the browser) and as soon as you see a scrollbar find out what has caused it and re-arrange your content with media queries to make sure it fits better. This will never involve using ‘zoom’. It will involve going from multiple columns down to single columns and ensuring everything fits and lines up nicely.
There is no easy fix and you just have to work your way through the page and apply media queries at the point in the design where it doesn’t fit or looks awkward. This does not mean just shrinking it. If you wanted that approach for mobiles then you could have simply removed the viewport meta tag and mobiles would have squashed it to fit automatically! Of course then it would be impossibly small and virtually unusable.
Validate your html as you have some errors in your code (and validate your css also as you are using // instead of css comments /* */). Don’t use multiple breaks or multiple just to make space but use css for the presentation as that will make it easier to change when you introduce more media queries. Get rid of the font tag as that does not belong in this century:)
Hope that gives you a start but if you get stuck then just shout and someone will help.
Okey, Im stuck. I even dont know how to startup with this, i tried changing the width of particular elements but stil it didnt work well. Do you have guys any tips?
as @PaulOB stated, the first thing you should have considered when you began structuring your site is responsiveness. Responsiveness is not an afterthough. It is an encompassing methodology for structuring a page.
Replace the viewport meta tag with this one: <meta name="viewport" content="width=device-width, initial-scale=1">
No one in their right mind would try to make any major changes to a site with 718 validation errors. One just cannot count on CSS behaving in a predictable manner across all browsers when the HTML is so badly out of order.
Click this link… it is the HTML validator’s view of your site: https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.sprytneszkraby.pl%2F
Click the little rectangular button near the top that says “Message Filtering” for a simplified summary. The vast majority of those errors are caused by missing semicolons. But not all. Correcting the errors should have been part of the development process from the very beginning. Valid code is not an afterthought.
I can’t read Polish but it doesn’t look like poetry. With that in mind, the many break tags instead of <p>aragraph tags are inappropriate.
You have not yet addressed the horizontal scrollbar that @PaulOB mentioned.
Did you actually write this, or did you inherit it and now you are trying to fix it? or have you taken this on as a job but you don’t know how to do?
Start from the beginning and construct the site with responsiveness in mind. Avoid fixed widths, etc.
There are no easy answers to this one.
You have been given items that need to be corrected. If the only way to correct them is to start anew, then start anew.
Take a class in fundamental HTML/CSS if you have no idea what we are talking about.
There is a lot of work to do. Work on the problems one-by-one or start from scratch and don’t repeat the mistakes.
There is no fastest way. You have been given examples of some of the problems that need to be fixed. The validators list most of them.
You should not have stopped learning HTML and CSS. If you learned the basics this mess would not have happened.
You are trying OUR best. This is called, “find someone to do it for me.” it is not called learning. If you are learning, then start again as you have been advised.
Are you able to work through the list of errors that the Validator is showing and correct them? (You can always ask for help here if there’s something you don’t understand.)
You really need to get the code into better shape as a first step.
Yes I think the point Ron was making is that we need to see that you are making an effort to resolve this for yourself. Fix the html and CSS validator errors first and then we can address the responsiveness of the page.
We are prepared to help you with this task but not prepared to do the work for you until you have tried some of the things we mentioned.
Don’t give up though and don’t be afraid to ask for help on specific points as that shows you are taking an interest and intending to learn how to do it for yourself.
A quick tip is that when you set an image to width:100% or max-width:100% you then want to set its height to auto otherwise it will be stretched out of aspect ratio.
I corrected all errors, except 3 ones which werent able to delete as well as I blocked the horizontal bar while zooming to letf/right. Could you give me some more tips about responsiveness? Im trying also to learn a lot while doing this webpage, because I totally changed interests and I need some more help to be back in webmastering. Ty a lot in advance once again
Well done in removing all those errors. Those that are left are quite simple to fix. An <li> element can only be a child of a list or menu element. So you need to change the div container to probably a <ul>.
The three errors on lines 839-841 indicate that <li> is not allowed as a child of <div>.
That is true.
List items are required to be children of an ordered list <ol> or an unordered list <ul>.
Which one of those should your div be changed to?
The width value of 80% on line 851 is not valid because width and height attributes are presumed to be pixels and are written without a unit of measure (px), such as: width="300" height="100"
If you want to apply a width of 80%, it should be done in CSS.
Likewise the value “auto” is not valid within an HTML attribute. It must be applied via CSS.
That should help you clear up your last errors, not by deleting something but by fixing it.
Next, why and how have you blocked the horizontal scroll bar? It should not be defeated. It should be able to serve as a signal that something is wrong. Please restore it.
I’ve unblocked the horizontal bar and corrected all warnings and errors. Thanks to all of you guys. Could you also give me some tips how to start with the resolution now?
