Masonry.js libraby breaks css at the bottom of site - javascript

As the title says entire bottom part of the site breaks on mobile(for example samsung galaxy s5 mini). It only happens in mozzila mobile broswer(here is a screenshot). Does anyone know why is masonry causing this. http://i.stack.imgur.com/FFSKw.png

It's possible that the float isn't cleared after the tiles have been rendered.
See: https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

Related

CSS properties not working on certain mobile devices

This has been happening to me quite frequently and its driving me nuts. I make my website, It's completely responsive on desktop, I looked at the responsive toggle in chrome dev-tools and mozilla dev-tools. Everything is fine. I go to publish my site, everything looks good, I check the site on my phone and tablet and those are fine too. Now if my friend who has a different phone or tablet try's to access it, the images are either stretched or squeezed and do not follow the CSS properties I gave them. I have no idea why this is happening and haven't been able to find a solution yet. Any help would be greatly appreciated.
(This is not a media query issue It's mainly images getting distorted, but only on select screens)
not sure if this would help, try giving fixed width & height for small images other than header or banner images and include them in flexbox. Header or Banner images will more or less will get trimmed with respect to mobile layout.

Images inside posts re-sized gradually to be in zeros width and height in android browser

I've got many reports from Android visitors to my blog said that when they are browsing any post from my blog, the images inside the posts get re-sized gradually to be hidden completely (width and height like be zeros, just the shadow of the image is visible).
I've tested that and I confirm the issue in android browser and Facebook browser as well, but Google Chrome shows everything OK.
I don't know what is causing this problem, JavaScript or CSS problem? I'm using a bootstrap css code for images for responsiveness on mobile devices.
Seems this line did the problem:
img {box-sizing:border-box};
I removed it and it works in Android browser!

Bootstrap image responsive not working in IE and Firefox but works fine in Google Chrome

I am facing a weird behavior from bootstrap. I am using img-responsive class for a image in my page using bootstrap.
my image is fine in Google Chrome it re sizes properly but in FF and IE it is re sizing properly in desktop and I PAD view but when i go lower screen size like phones and i phones it doesn't re-sizes it stays the original size.
It works fine for Google chrome for every screen resolutions but in IE and FF it doesn't shrink in any single columns sizes. it retains the original size of the image which is very big.
Attached are the images from the web inspector for each browser.
Firefox
IE
GoogleChrome
Any help
Try updating to the latest version of bootstrap. This has been resolved since version 3.2.1
Related issue : IE backslash hack on .img-responsive stretches images in IE<11
Added col-xs-12 to all the divs being used, then it fixed the issue..

Fixed position not working on ios devices

I am working on implementing a couple of instances of http://amsul.ca/pickadate.js/ but i seem to be running into a couple of problems with the css. If you view the above site on an ipad or iphone, the calendar is positioned correctly, as the container covers up the window as a good fixed position element should do. But if you were to see my site, and pull up the calendar, then you would see the calendar container (the greyed out background) starting from the bottom left corner of the input that it is next to (as if it were positioned relative) and extending with the same dimensions of the window. In addition to this, when I inspect in mobile safari's web inspector on my mac, the blue box, which usually indicates where the div is being positioned is fixed to the top of the document and not necessarily the window.
The only error I'm getting are a 404 from a stylesheet that has nothing to do with this plugin.
here are 3 screenshots of the problem that i am facing, the first has shows the input that the div with the calendar is just after
http://www.dumpt.com/img/viewer.php?file=rvipsnuyfyuv8u6xt5dr.png
the second is where inspector seems to think it is rendering and you can see the translucent background further down the page
http://www.dumpt.com/img/viewer.php?file=nc7el13lcthqlzrsfarg.png
and the third shows that it seems to be the correct dimensions and everything, but the calendar does not seem to be positioning itself correctly
http://www.dumpt.com/img/viewer.php?file=8hbswbfv9abwobkth8iq.png
If anyone has any ideas about why this might be I would love to hear them because right now, i'm at a loss.
EDIT
This page has been tested on android devices and works perfectly.
Ok, so it seems that mobile does not support fixed elements very well.
http://www.quirksmode.org/m/css.html
Search: fixed
which is really unfortunate. If anyone has any workarounds for this, that would be really great.

Header DIV disappears on resize in Safari but works in Firefox and Safari Mobile

So I've had this issue with my header. My site is adaptive and when it reaches tablet size and less the navigation turns into a drop down box. When I resize the window in Firefox it degrades nicely, but in Safari, when it reaches the switch the whole header disappears. I've been toiling with it and discovered that when I removed the slider or set the sliders display to "none" it works. When the slider is there I can't tell if the header div is behind the slider or just disappeared all together.
What in gods name is going on here?
Here's the site. http://www.benstephan.com/html
Your site works just fine in firefox, chrome and in safari too (tested with version 5.17). Probably you need to update safari then test. btw cool site.

Categories