Background image won't show on only on iPhone devices - html

I'm working on a website and it's nearly finished, I've solved a lot of problems using this StackOverflow, so thank you very much. But I failed to find a solution to this problem. So the problem is that the background image of the intro website won't show on iPhone devices (Desktop, Samsung, Android etc. works). So does anyone know why this problem occurs only on iPhone devices and how to solve it?
Website link: http://cubedesign.ba/
The code is long, so I don't know what to really send.

Related

Website's images got scale in iphone's screen but in android screen it look perfect

I need help for fixing images scale issues in my project. On iPhone, screen images got scaled, but on Android phones, all images look perfect. I share some images please check and help.
Link of my project please check it inspiration page in Android and iPhone:
http://64.227.178.9/inspiration/
Does anyone know how to fix it? Please help. thanks
I tried to apply media queries to different ways but it look perfect in Android but in iPhone images got scaled.

html background-image doesnt show up on mobile

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

Getting lightbox to work on an iPad offline in GoodReader

Has anyone managed to get a website using lightbox working offline using GoodReader or any other offline method?
I've built a fairly simple website with images/videos using gallery with thumbnails and lightbox to view images full size. Works fine on my PC. When I transfer the files to the iPad, I can't get the images to come up full size. The pop-up just shows a spinner.
iPad running latest version, 9.2.1
GoodReader App, see http://www.goodreader.com/
Any suggestions on what could be the issue? Or a better way to view my Gallery/Video website from a thumbnail to full size, offline, on an iPad.
The purpose of the website is to demo videos/image when we have no internet.
Any help would be greatly appreciated.

Why does my website have a gap on the iphone and ipad when portrait?! driving me crazy

I'm on the verge of eating my computer, bascially i'm a first year student doing HTML and CSS, just started with media queries while i've been off and am extreamly proud of my website, but when I view on the portrait mobile or ipad it loads very nicely and does exactly what I want, but you can slide slightly to the right for some reason and I don't know how to fix it! I have a small gap that I can't get rid of, why is this happening? my website is here www.webmonsters.co.uk i'm very new to this.
Thank you.
UPDATE:
So I just worked out what it was, when I scaled down the slowly in brackets with the highlighted I noticed that the elements was no scaling with the browser windown, But when I put a 90% it worked and got rid of the gap! thanks for all your help guys.

Rendering issue on iPad display of website

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