I've got a question about the img comparison slider from kavya sukumar. I already asked there in the issue thread. But i'm not sure if she's still active.
So I took her image slider for my website. It works fine in desktop version but in mobile it won't work. My Question is now, if somebody knows how I can fix it, so it'll work in mobile?
Here is my website:
http://486755-10.web1.fh-htwchur.ch/
It would be awesome if someone could help me!
Thank you!
For Mobile device make the container width:100% as well as images. Don't use fixed width, try to use percentage for mobile devices and this will support all mobile viewports.
Ex: Remove image width:500px and try to change in 100%
This will make responsive and supportive.
Related
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.
I have problem with android layout and don't know how to solve it. The code is here https://rnplay.org/apps/XD0WGw on iOS all working fine, but on Android the half of circle "avatar" is hidden by "infContainer", this is image. I tried to use z-index but it's not working.Circle part should be visible on infContainer. Please help :)
I have searched a lot of answers to similar questions, but nothing has fixed my issue.
Here is the site: dev.thekarmagames.com
The width and responsiveness work fine when simulating phone and iPad screens on computer, but something goes wrong when displaying directly in mobile Safari and Chrome on iOS devices.
Here is what it looks like on iOS:
I've tried manipulating CSS, editing/removing JavaScript, and experimenting with viewport settings. Nothing seems to work.
I could really need a lead that will set me in the right direction, and I'll happily share the solution with everyone once I find it.
I'm looking for an responsive image slider for a particular case.
This is what I would look to happen on desktop/tablet/mobile.
You can also swipe through the images on tablet/mobile.
It's important that the images don't need to have the same width. (height is always the same)
Does someone knows a js library for this?
I searched but most of the time you only have view of 1 image.
How's this?
http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php
It supports IE6+ and is very lightweight. You can easily make it responsive by wrapping it in a div with overflow: hidden; that varies in width as you require. Alternatively, you could have a go at rewriting it as you require (it's quite a lightweight script!)
The lemmon slider works great with Touch Swipe. The instructions to add this are here:
https://github.com/lemmon/Lemmon-Slider/issues/5#issuecomment-25177163
I have a problem with the view on mobile phone and tablets, i want the banner to show animation in mobile phones, i know that flash won't work for that for sure, so what alternative is there to make this possible, and maybe long so i think GIF also won't work.
any ideas?
Thanks all in advance!
Another great option for mobile and desktop alike is the WOW slider, which is a jquery plugin you can add to a page pretty simply:
http://wowslider.com/
If you have a specific question on how to implement a slideshow, post back for more help.
You can animate a banner using normal UIImageView animation methods, cocos2d or HTML5. You can also use CoreAnimation. If you want to understand how to animate it, do add some details to the question.
Use ImageView and Split the gif file into several parts and then apply animation to it or refer this
Through the use of the jQuery framework, you should be able to google and find various plug-ins that can help animate your header, even on mobile devices. If you learn the jQuery API, you can also animate most HTML element blocks on both desktop and mobile device platforms.