i developed a new theme for magento store , everything is working fine except a new bug have occured , when the site is opened in iphone6 or iphone6 plus it shows repetitive images which are not even set as background images. The css properties they are inheriting are from bootstrap 2.
I have attached the img for reference moreover can't copy the whole lot of 8000 line off css here so it would be great if somebody help.
In dev tools, iPhone shows the right file name for the background, but its not the actual file at all. So the CSS is just fine, for whatever reason, iOS is sticking a random image in there and calling it by that file name instead of the actual image that is called that. Super strange:
iPhone 6 CSS Background Issue Screenshot
Related
I'm using visual Studio Code and using live Server to see what it looks like as I'm coding.
Here's the dilemma I'm having. After coding it looks great on live server.
But when I open it directly into a browser (I've opened in chrome, firefox and explorer), everything works except the images doesn't show. (my background image, logo, icons, pictures will not display).
I transfer all files to my other laptop and same result
All my images are in CSS using the background attribute. Everything else works, font color, shadow, border, hover etc. except the images wont display (except in live server). Has anyone else have this issue and if so, how did you resolve it?
I've attached a screen capture of my code...I commented out all information in body. commented out the other css file and commented out all css code except for body tag, should work, but still will not show the body image. the picture file is located in the same location as the html file. I've used quotes and without quotes around the url address and same results.
I used my other laptop and coded the same thing on that (except using different image) the image worked on that one.(used visual studio code on that laptop as well)
I'm at a lost as to why this is happening. any help is appreciated. as I really dont want to have to re-write the html and css again.
html and css code
Does your Webserver have the permission to view the image?
The way you wrote your css implies that the image is in the same folder as your .css file.
If it is not so do it like "../path/to/file.jpg"
I have a live site at http://www.factormedia.co.za
When you inspect it to phone scale (around 350px width or so) it loads 3 icons in the menu, of a house,laptop and notepad.
However if you had to actually use a phone the images do not appear. So trying to figure out why it is not referencing my font library from fontastic.com.
Works fine in a preview but on the actual device itself.
It seems when you embed using the link they give you works when testing and using anything from a laptop to a desktop, once you scale down it starts to give issues to mobile. To solve this issue the easiest way was to manually download the icons I was using and use them as their own custom font by installing it as the site instructs.
This then solved the problem and it now shows on smaller devices
I created a cross platform app using jQuery Mobile. When I test it on various browsers it works fine and displays all images with no problems. When I build it with Phonegap Build, transfer to my Android phone and test I have problems with some images displaying.
I have several similar pages where I display a picture on each page. The problem is that pictures display on some pages but not on others. I have ruled out file type as an issue (I am using .jpg, .jpeg and .png and I have at least 1 of each of these working fine) and I have ruled out the code as the issue as I have used working images on pages that werent displaying the image before to prove that it was the image itself at fault (the image displayed fine when I used one that was working from another page). I have also ruled out picture size, dpi and dimensions.
Does anyone have any ideas?
I'm designing a new portfolio website by using a template. Now I'm replacing the gallery with images with my own images, but something is going wrong. My own images are not visible in IE, but it works in Chrome. I know the codes can't be a problem because when I change it back to the original image, it works fine in both Chrome and IE.
When I "right click>properties" I can't see any details when I'm using my own image for example the URL. When I'm using the original image I actually can see this details.
I tried a number of things:
Change .jpg to .png --> doens't work
Change size from own image to size original image --> doens't work
Change filename --> doesn't work
Delete this image from the image folder and replace it --> doensn't work
Anyone who knows what can be the problem here? My site isn't published yet, so I'm still working with previews in dreamweaver.
If you look at this page, you will see that the right two images are sideways:
http://www.disneypinplace.com/beta/pin.php?id=PD78685
But when you click on them, they appear correctly in full screen view, vertically. I can't see anything wrong in my HTML img code that could cause this.
Can anyone tell me why this is happening? These photos were taken with an iPhone 5 by the way.
This is a particular problem with how the iPhone exports images. Seem this link for a similar situation.
Computers/browsers and iPhone software interpret the camera metadata (details about image, including portrait/landscape) differently thus causing the difference in rendering.
I was able to download the far right image in Pixelmator/Photoshop and save it as a jpg again, making sure it was portrait. This made it so the browser properly rendered the image and did not rotate it 90 degrees.
Were these pictures taken sideways, by any chance? Have you tried editing and "exporting for web" from Photoshop, for example?
Maybe the problem is on the image EXIF (as in you only see the image correctly because the browser reads the EXIF info and rotate it on screen). Exporting it will most likely remove that info from the image file and it might make it correct.
I spent an hour with this that I'll never get back. :)
The Problem
I took the picture on my Samsung GALAXY Tab PRO 8.4. It rendered SIDEWAYS in an Android Emulator as well as in FireFox 42.0.
The Fix
I edited the picture in IrfanView.
I went to Properties_Settings -> JPG_PCD_GIF ->
UNCHECK "Auto-rotate Image according to EXIF info (if available)"
It now renders OK in FireFox. I haven't checked the emulator yet.