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>
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?
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:
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
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.
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.
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.
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 ?
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.
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.