I have a perfectly working hosted website...on theory. I did all the responsiveness and I was testing it on a computer with mobile browser emulators. It is working with minor mistakes (which I am aware, and will fix). But here is the biggest challenge. If I run my website in emulator on the computer it does everything nicely. But from phone, it doesnt load the background-image.
So I excluded that problem would be with being responsive, problem must lay somewhere in mobile phones (both times ran by Chrome). Also doesnt work properly on other mobiles too.
Any idea or suggestion towards the mystery?
Thanks,
Koppany
Related
My site renders fine on every browser I’ve tested on both desktop and iPhone. However, on iPad, it cuts off the content at the top, no matter which browser is being used. (Each browser shows a slightly different amount of the content.) Super simple, single page site built with Bootstrap 3.
Would appreciate any pointers about where I went wrong with the code. CSS is not my strong suit; I’m relearning it, so apologies for what I’m sure is a basic question.
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 have made a collaborative writing website called Fablelane (https://www.fablelane.com).
It runs with a somewhat responsive layout (except it looks bad in mobile, but that is what I am working on). Now, if I visit the site in IE 10 mobile from my Nokia Lumia 920, I can pan about 20 pixels to the right.
I am pretty sure that I don't have any weird paddings anywhere and anything that creates unnecessary spacing. I also have the view port meta tag set correctly, and I have made everything box sized.
What am I doing wrong? The issue is hard to pinpoint for me since I don't have access to other smartphones than Windows Phones, and because it's not within my budget to buy things like BrowserStack. I haven't had luck setting up the local emulator to find my ASP .NET MVC localhost site either.
Can anyone help?
Perhaps there is an overflow issue. Maybe try popping:
overflow:hidden;
into your css to see if that makes a difference or not.
I have encountered the strangest problem I have ever encountered in my web development career, and I just cannot seem to solve it.
I developed a website: www.ktngroup.co.uk a few months back, all worked perfectly upon launch across all devices. Now it would seem as though the site has developed some form of issue limited only to ipad. The strange thing is, I cannot replicate it when using css user agents and screen sizes, which is strange becuase it looks like a css problem.
I cannot describe the issue very well, but it looks as though all the content (Except the header) is pulled off the site on ipad/not displayed. Also, when using adobe edge inspect; I see that none of my css rules are being applied to the elements.
Comparing the desktop version at 1024px vs the ipad landscape is the best way to discover the issue.
UPDATE: When I cancel the iPad fully loading the site (roughly the first two panels) the site functions perfects on those two panels – almost as if its loading something further down that breaks the site?
If anyone has any guidance, I truly could not thank you enough.
For those who may encounter the issue – it's what Jack Pattishall suggested. The iPad didn't seem to respect vh as a unit, and as a result my images were huge.
To fix this I added a media query to handle the handheld tablets with a set pixel width/height.
Hopefully this can be of use to someone
I am baffled by a strange problem I'm encountering.
On a standard web browser, you'll see some social media icons, like this screenshot:
This is exactly how they appear in Safari on my iPhone, my iPad Mini, and my colleague's iPad Mini too.
However - this next screenshot shows what they look like on the client's iPad:
I can't for the life of me work it out. I see the same problem on iOS devices viewed via a remote VCN simulator too, but can't fathom why this is.
It's unlikely to make a difference(?), but me and my colleague are in the UK, whilst the client is in America. All parties have tried clearing their cache, reloading, etc. Still works fine for us but not for them.
My colleague and I have tried viewing on different wireless networks, over 3G, etc. Again, it makes no difference.
Any ideas? Thanks!
it looks you're missing a reference to http://your-site.com/images/aarp/socials/socials#2x.png
on line 1747:
http://your-site.com/?css=aarp-css/alterna-style.v.1366969865