Hey everyone,
Recently, I have developed a website for my project and was using a 10-inch laptop during the development time. It looked fantastic on a 10-inch screen. However, I faced a problem with the width (CSS properties needed to be changed) of navigation bar on the top when I tried tried running the website on 15-inch screens.
How do you developers avoid problems like this? and other problems like CSS3/HTML5 cross-browser compatiability?
cheers,
Hi rotten69. You are getting this issue because of resolution problems in different screens. I suggest you use percentage (%) instead of pixels (px) in your css styles. This will almost solve your problem. :) happy coding.
With all the different variations with regard to screen resolutions these days, you may wish to look up media queries and responsive design. They aren't magic bullets by any means, and in some instances they could prove problematic, but a 'mobile first' approach may be useful. Just an idea.
Ardav is right, there isn't any one magic method that is best. One possible solution (and easier to do although not the best for every user) is to use a fixed width approach. So basically you design your website to look best on the most common screen size. This will leave a lot of white space for users with large screens but it will at least be consistent for a large portion of users. Here is an short article discussing the problem.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.