Streaming live at 10am (PST)

Responsive Breakpoint for iPad


#1

Hi folks,

How do i enable horizontal view for iPad? I cant find it!

Thanks


Need help to set custom media queries for iPad Horizontal view
Make tablet media max-width bigger to 1024
Wide screen desktop (1200px) and tablet landscape media queries
Activate responsive nav for iPad landscape
#2

currently there is no landscape iPad media query. Using the container element in the desktop view will ensure all of your content is visible on a landscape iPad. You can also find information about altering the container width with different media queries here.


Activate responsive nav for iPad landscape
#3

Hi @Jokenpo, are you trying to show your site in ipad in horizontal view with the mobile menu shown? Anything over 992px is considered desktop mode, including ipad since it is 1024 px. You can use some custom media query to show or hide elements when the viewport gets to 1024:

<style>
@media (max-width: 1024px) {

... add css styles for elements when the screen is at ipad width
}
</style>

You put this code into the Header of your site, using custom code: http://help.webflow.com/site-settings/custom-code. These styles will not show, until after the page is published.

I hope this helps smile Cheers, Dave


#4

Hi Dave

I think this is exactly what I am looking for. Whilst I am coming to grips with web flow, my CSS is a bit rusty. You mentioned above for the script that goes into the header tag "... add css styles for elements when the screen is at iPad width"

Can you confirm by looking at the link below what I would put in there to make the hamburger responsive nav load on iPad landscape?

https://preview.webflow.com/preview/arcadental?preview=1b1b6f023fc0fad0f15085a29498a749

Cheers
Jeremy


#5

Hi @jeremy, my suggestion is to create a duplicate of your Navbar symbol, then give each symbol a unique ID. Make one symbol to show only on desktop, and the other on tablet and phone views. After doing that in the designer, go to Site Settings and click on the Custom Code tab and enter the style information below into the header:

<style>
@media (max-width: 1024px) {

	#desktop-nav {display: none;}
	#mobile-nav {display: block;}

}
</style>

Save changes and republish your site. I made a quick video as an example of what to do in the designer.

I hope this suggestion works/helps smile If not, let me know.

Cheers, Dave


How to Show Tablet Navigation on iPads and Small Screens
#6

Hi Davidn and Cyberdave. Thanks for your help. I will try to do it and posthere again.
Thanks a lot.


#7

this was very helpful @cyberdave


#8

Hi Cyberdave

Only just picked up this response. Thanks heaps for putting together this tutorial, it is exactly what I needed and will come in handy for future sites smile

Regards
Jeremy


#9

Hello,
I have followed the directions in the video and still my ipad landscape is behaving.

http://thaddeuswjohnson.webflow.io

Thank you for your help.

Ken


#10

Hi @kennylj

Try using this code

<style>
@media (max-width: 1024px) {

	#desktop-nav {display: none;}
	#mobile-nav {display: block !important;}

}
</style>

#11

Hello David,
Thank you for the quick reply.
I did make the requested changes and it still did not work.
I have attached 2 pics, one in portrait which looks good and the other in landscape.

Ken


#12

If you could post your read only link I will be able to learn more.

From what I can see the nav is displaying correctly. What do you expect to see? If you want the menu to be an icon that opens when clicked you will have to use the settings panel for the mobile nav.


#13

Hello David,

Here is my readonly link.
https://preview.webflow.com/preview/thaddeuswjohnson?preview=25efe8eb2d951bebec4ef5459995faaa

As you can see from the landscape photo, the header is not completely showing up like in the portrait one.There is whitespace above the header. I tried moving the header but it still shows the whitespace.
The site shows fine on all devices and modes except ipad landscape.

Thanks again.


#14

Hello David,

I have decided to redo this site since I found some other issues.

Thanks

Ken


#15

apart from the resized containers that we get when using the large screen media query (Activate 1200px “Large Screen” media query), is it possible to have 2 different style sheets, one for wide screen desktop, and one for "standard" screens and landscape tablets ?

I would like to have bigger sizes (text, images, etc) for large screens and smaller ones for standard screen sizes and landscape tablet.

Should I add a specific style sheet in the header ?

Thanks.


#16

Currently, I don't think so.

The tablet landscape issue is something I (and others) have mentioned to WebFlow in the past.

I know they have a lot of things on their plate... but I hope they address the issue...
not to mention the captcha, sub-folders, image upload, image-crop, ftp-upload, iOS end-display - issues.

Lots of issues - but the at least the core product is sweet.


#17

Hi @Michel, that media query is for large screen 1200 px and higher, but you can also create custom media queries for any size device, any size media query. Custom media queries work alongside the built in viewports and 960 grid system in Webflow.

Cheers, Dave


#18

@cyberdave - how do you add / create custom media queries?


#19

+1 MILLION! I would like to know too !


#20

Here is an article about using Custom Media Queries, hopefully this will help: http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html


Interactive elements appearing on ipad even though set to display on desktop only