I am very new to web designing and my site is almost about to be live. http://cloudchowk.com/future/
But I have some serious issues found at the very last moment. When my site is zoomed in or out, the contents are being misaligned at some certain percentage of zoom.
Also my footer gets misaligned to its left when viewed normally in iPad and iPhone.
I think firebug and chrome inspector will help you if you need my code because I don't know what code to insert here specifically.
Any help is much appreciated.
You can't do that for all possible browsers / devices.
There is no programmatic way to lock your site so that no browser will be able to zoom it.
Related
I'm a novice at HTML and CSS and I launched a simple responsive website with only one page, but then I managed to add a couple of pages more to it after a few days. Everything looks good on desktop and when I make it smaller to 350px width via developer tools, it actually looks good as it should and all responsive.
Link: https://transporte.capital/
However, when I enter it from my mobile phone it looks horrible as CSS becomes almost inexistent. The logo becomes a link with underlines, the tweet widget is still there (I disabled it via display: none; in media queries because it takes too long to load), the social media section is distorted, all images are huge, and so on.
Is there something wrong with my mobile phone? I tried to look for cache in Site Settings - Data Stored in Chrome, but there was nothing for my website there.
Now I tried the Opera browser and the website looks good as it should. What should I do to make it update on Chrome? And will it update as it should the next time I make changes to it? Thank you!
screenshot 1
screenshot 2
I could see the page properly in my Android mobile Chrome browser. Please clear cookies once and ensure the zoom in is not enabled. Attached is my screenshot. Screen size: 393x719px
I am just a writer, no knowledge of web programming. If you look at my page here: https://nataliaputilova.blogspot.com/2019/09/blog-post_50.html it looks normal.
But if you look at the screenshot from my phone (attached), it does not. What is the issue, how can I fix it? The same problem shows up on both iPhone and Android.
I know in the past it worked, but then I did some changes per How to reduce left margin on blogger that I think messed up the mobile view. I tried to undo them, but I was poking around a lot and I don't know what I changed exactly
Screenshot from iPhone:
(there's not even scrollbar at the bottom to move left-right, just this fixed partial view)
I tried to google if it's possible to customize the mobile version, but the results said for these modern themes it should work automatically. But the mobile version is not good, what can I do?
I am working on a website, I need it to support in all resolutions till 4k and all browsers. For the same requirement, I have been using chrome developer mode, and have been testing my page in all resolutions.
But my page is looking different in actual screen of the same resolution than the developer mode with that resolution.
Can any one please suggest what could be issue?
well.. when when I tried to test other websites on google chrome developer tool for responsive compatibility, I found that it was showing different result for other website only.Perhaps I am not using it correctly, would appreciate greatly if anyone help with it.
try using something like the window resizer extension for a more accurate representation of how your webpage will look on certain screen sizes. Chrome is not always the most accurate.
Just started doing some cross-browser testing for my website and there's some weird things happing with my home page in Firefox.
The slider looks to be smaller than the thumbnails below it, the thumbnails are touching each other, and when you resize your browser, the thumbnails don't scale down (they just overlap more). If you look at the site in Chrome, Safari, or Opera (even chrome/safari on iOS), the slider's width is the same as the thumbnails below, there's space between thumbnails, and everything scales properly when resizing the browser.
I'm also noticing some lagging when I hover over the thumbnail (CSS3 animation), again only when I'm in Firefox.
What gives? What am I doing wrong, or does Firefox get goofy with responsive sites? If it matters, I'm using this framework
EDIT: Also, if you click on any of the thumbnails, it seems like the images on THOSE pages look fine and scale properly. Seems like just the home page is affected.
Welcome to the frustrating world of web development. Every browser interprets code differently, THAT is the number one challenge of our industry. Even the same browser foundation interprets differently from version to version. Internet Explorer HAS ALWAYS been the worst browser to design for because it is usually 2-3 iterations behind everyone else. AND you HAVE to worry about IE, because it ships with most PCs, it is the most prevalent browser.
So, you have to think about who your audience is, and design on the platform most appropriate for that platform. For example, if your audience is graphic designers, you are safe to develop for modern browsers. But if your audience is the casual, not-to-techie PC user, you have to tailor your designs for IE. (sorry).
You can use a tool like http://browsershots.org/ during development to see how your site is performing in a wide variety of browsers. Or https://browserlab.adobe.com/en-us/index.html#
You then have to learn about the "hacks" to make your site display similar, regardless of the web platform. THAT is an immense subject area and you will have to learn and do research until you understand it.
BUT ALL OF THAT BEING SAID, THE MOST IMPORTANT DESIGN PROBLEM TODAY IS MAKING A RESPONSIVE WEBSITE THAT ADAPTS TO BOTH LARGER AND SMALLER SCREEN SITES.
Mobile is the new black. Going forward you should ALWAYS develop with mobile in mind, unless you KNOW that your audience is NOT the mobile-type, and that is the exception, rather than the rule.
Added max-width="100%" height="auto" width="100%" into my img tags for the thumbnails and it seems to be working
I am a complete novice when it comes to website design, but have the task of designing a website for an academic conference. I wanted to design a functional site to which I understood the code behind it. I have managed to do so, but am now having problems with viewing it on a smartphone. When I have checked the website on online simulators such as brick and mobile is seems to work fine. However, when colleagues of mine with smartphones try looking at it, the main content area will not scroll. Does anyone know of a way to resolve this. The url to the website is:
Conference Website
Edit: The problem appears to be on android phones. If you zoom in a tiny bit you can then scroll alright, and if you move to a portrait view rather than a landscape view it is fine, but it will not scroll on a landscape view on an android.
You might want tot try adding viewport meta to your header, ensuring every device sees your site at the optimal width (this eliminates the user having to zoom in on most mobile devices).
You can find some good information for this in the following article: http://www.html5rocks.com/en/mobile/mobifying/
There are some zooming issues with the website on a Samsung Galaxy S2. This has mostly to do with your menu, which is set to 21%.
Furthermore you're setting height on a lot of elements to 100%. You might want to look into that as well.