Small images loading on Safari - html

I am having problem with a images that load in very small format on http://goo.gl/ZkLIIO.
I have tested it on every browser on Windows and i dont see the problem, but i have been told that on Safari on Mac it looks very weird (aka the images get very very small).
I took a look at CSS, and i cant find any problems.
Maybe this is weird question, but can somebody take a look and let me know is this happening on your end too?
Thank you

I'm on a mac and the web page isn't behaving consistently. Sometimes the images look like I imagine they're supposed to, and sometimes they're, as you said, extremely tiny.
Maybe try putting your JS at the bottom of the page instead? Maybe the page and the effects and your code are loading out of sequence?
In general, it seems kind of unresponsive. If I try resizing the window, the images get stuck at certain sizes, don't go back to the way they were before, etc.
I don't have enough reputation points to post screenshots; sorry!

Yes, they look small in Safari on Mac
try to check why press-gallery-item has computed width: 80px; (Use object inspector)
I will try to look deeper.

Related

Can chrome phone emulators be trusted ?

When developing and testing a websites responsiveness, is it wise to use chromes built in phone emulators to accurately do so?
I'm not sure what the issue is, but it could be one of these things.
Browser Cache
You may have made a change to that specific element in the past (fixed it) - but because of your browser's cache, it looks the same. Try clearing the cache on your device and see what happens.
Script Issues
There is a chance that the scripts you're using to make the arrow go up and down are a bit too much for the mobile device, and make it behave in a weird manner. Perhaps leaving it still on mobile or removing it all together would be the solution?
Edit: After looking through the errors on the website, it seems like you have quite a few errors and some critical warnings. If you patch these up, it might work on mobile.
If neither of these are a solution, let me know in the comments below.
The problem with your website seems to be a simple case of not loading CSS. Namely, you're trying to load /assets/css/app.css which appears to be missing (404).
Additionally, to fix the arrow's positioning, you'd need
#hero {
flex-direction: column;
}

Iframe is wrong displayed ONLY on FIREFOX

Im havin a big problem.
Im programming a website for a company in germany.
Since there are so many sites on the page i took an iframe in my index.html file instead of using a div tag because this would need a lot more time since i need to write the div stuff on every page.
Every Browser like IE,Chrome,Opera and also Safari shows the website like i want it to be shown.
But Firefox shows the iframe part in a small window in the left upper side of the window.
So you cant see any content or even 100x bigger than normally and in a quite small window.
So do I have to change anything in my code or do i need to add something?
The bigger problem is actually that the man who is able to start the server doesnt want to start it for let the website goin online because that doesnt work on firefox.
He explained the problem to me that way. but my program (mirabyte) shows everything in the right way (ALSO FIREFOX) so what can I do now because I need to let him try every small change i will do. So it would be nice if anyone does know the EXACT answer because he or she already had the problem.
Any ideas?
Thank you so much
Sasse
Make sure that if you have the iframe in any sort of container, that container also has the applicable height attribute. Also make sure that the iframe height is applied to both the HTML and the body tags.
Beyond that, we would have to see the part of your code where you're declaring the iframe to say anything more specific.

images not appearing in canvas on chrome in iOS7

I'm using haxe and openfl to create an html5 application. I tested the app in multiple browsers and devices, all work fine except in Chrome on iOS 7 only. The images used are not appearing seemingly randomly. Every time I re load different images appear and others disappear with exception to a couple that are always there. Here is what I tried:
I tried setting the z-index on the canvas that is used for one of the missing images, as well as a bigger width and height.
I know that the images are being loaded, I used Charles to take a look. There are no errors in the console log and changing the time and place where the images are being added to the display list in haxe changes nothing.
I swapped out one of the images that are always there for an image that is never there and it still didn't load.
The file names had a couple dashes and spaces in them so I changed that as well with no effect.
It's a very strange problem that I can't seem to diagnose. nor can I really find anyone with a similar problem.
The main issue is the fact that I can't see what haxe is building that might be causing this issue.
This is hard to answer without code samples. My advise is to look at what's different about the pictures that stay versus the ones that don't, both in how you're coding and the pictures themselves. I've had problems with images displaying correctly on ios only to find the problem was embedded somewhere in the metadata of an image. Hope this helps.

firefox image display issue

I am working on creating a website with a background that transitions with a fade. I have an issue with display when viewing with Firefox. The site loads fine and cycles through the images, when the point comes for it to return to the first image it resizes to a tiny pic in the top left corner. This does not happen on any other browsers, and it does not happen with all of the images in the cycle. If I refresh the page the problem is fixed and the sizing issue goes. I have tried from other computers and the problem is consistent. A version of the site can be seen http://www.rhys-williams.webspace.virginmedia.com/ Any help with this issue would be a big help thanks.
SOLVED
I have resolved this problem. The issue is caused by the cycle changing quicker than the image loads. I added a second to the display time and it now displays fine :)
Remove div from this line -> so your code will look like:
<div id="slideshowContainer" class="slideshow">
I guess that firefox was confused because of it.
Edit: Also, there are few unclosed tags (html errors), but i think this was the main reason of problems. Also, document has no valid declaration... fix these things, and then try... i have tested locally, with base href, and all works fine?
Hm -> please try to remove this, too: next: '.slideshow'
next option should have selector for next button, if i remember well...

Responsive CSS works on regular browsers, not on mobile... why?

I am trying to put together a simple portfolio site, and have implemented a basic responsive design into the CSS as well (at the very bottom of it), and it behaves just fine - shrinks the 5 columns down to a single column and hides a few elements when I resize the computer browser. But on iPhone/Android browser it doesn't make any difference.
Here is the page in question -> Sample Page
And I can't figure out what the issue is... as in, this should be fairly simple to do, but apparently it's not, and now I'm losing sleep over it... so might as well ask here.
Have you [also] consider the use of viewport meta-tag? Just check This.
I tried loading the site but it seems like your custom js file is not found(404 error).