We are currently copying airbnb.
The top image does not disappear even if I check the responsive view on Mac, but the image disappears when I check it on iPhone.
Tried: I used background-size:cover and tried height:0 and padding-top:60%.
If you know how to fix it, please tell us.
If I am limited to say a 1920 x 1080 screen, how do I create media queries for a larger screen size without being able to test it?
You can set any resolution in Chrome. Just click "Toggle device mode" in Inspector and set any resolution.
In Chrome Developer Tools, you can use Device Mode to emulate any resolution, not just mobile breakpoints.
If you are using Google Chrome, you can open the web inspector Ctrl-Shift-I, then toggle Device Mode using Ctrl-Shift-M. It's mainly used for smaller devices, but you should be able to select 'Responsive' in the menu that comes up at the top of the screen, and enter any resolution you wish, along with a zoom level so that you can view it on your screen, albeit scaled.
If you are using Safari, you can do this relatively easily.
If you aren't using Safari, you probably should get it, at least for website testing. As you can see on step 6, Safari has LOTS of VERY helpful dev tools (i.e. disable JS, disable CSS, etc.).
Here is some instructions with pictures!
Go to the Safari menu (in upper left hand corner).
On that menu click Preferences, this should open up a pop-up box.
On the pop-up box, click the Advanced tab.
At the very bottom of that tab you should see a checkbox that says Show Develop menu in menu bar, check that box.
Now load your website in Safari.
When your website has loaded (for this example I'm using SO), click on the Develop dropdown menu.
Click Enter Responsive Design Mode, and that will now show your website in a window smaller than your browser window.
In that window, click on the window looking thing on the far left.
There are little gray bars on all sides of that smaller window, if you drag these you can make the size whatever you want.
As a side note, when you drag the gray bars (as shown in step 9), you should see the width and height resolution (pixels) change (see screenshot below), this is VERY helpful (and I use it all the time), as it will tell you the exact resolution (pixels) when your website breaks. P.S. you can go to ANY screen resolution - big and small - that you want to with this tool, which is really cool! (I've done 2500 x 1500, 100 x 100, etc.)
Hope this helps you!
I am building a mobile web app and I am having an issue when the soft keyboard pops up.
Currently I am re-sizing images based on screen height media-queries. The problem is that when the soft keyboard is showing the media-query does not apply to that condition anymore.
Is there a way to not affect the screen size when the soft keyboard is active to not mess up the styles? Maybe make the keyboard behave like a popup to not affect the original screen?
I meet a problem on mgwt development and wanna ask for help here. I am developing an application using MGWT and phonegap. And there will be some animation which will interact with user like swiping a panel with an background image. I implemented it by using Css translation. It works fine in browser(both chrome and safari) and in iphone. I use MGWT to create the home page with a scrollPanel in the middle, after clicking the items in the scrollPanel, a touchPanel will swipe to the center to cover the homePage. This swiping animation is done by Css translate3d(x,y,z).
However, when I deploy the application to iPad 4, the background color(using css) start flickering during the panel translation. the scrollPanel in the home screen keep flickering for around one seconde( I guess it is rendering), part of the items disappear and the part of the white background ground is show. The problem also appear in the touchPanel's content. I tried some suggested solution like hardware acceleration using translate3d(0,0,0) but seems it doesn't work.
Do any body know why? Please help, thank you.
Hi there I am developing a mobile site (NOT AN APP) for an iPhone.
This is a really noob question though I have searched and not really found what I am looking for, as I am not sure which exact search terms to use.
On an iPhone when you click an image it shows that image larger on the screen so you can zoom in/out.
I am using generated thumbnails that are a lot smaller than the original image, how do I load in a full resoloution image when a thumbnail is clicked?
again sorry for the noob question, if someone can point me in the right direction, part of the problem is that I have NO experience of mobile websites or iphone functionality, I will keep playing with jquery mobile and see where I get with that.
When you click on the thumbnail, you may redirect the user to an another HTML page where is include the image with a max-width and max-height in %.
In mobile, it's better to have a design in % to adapt the design at all mobiles screen.
<img src="myImage.jpg" alt="myImage" id="myImg" />
And in CSS
#myImg{
max-height:100%;
max-width: 100%;
}
You have others solutions, by using jQuery plugins too : http://fancybox.net/