I have a site which uses a different menu for mobile devices than on the Desktop version using media queries. If I resize a desktop browser window to a mobile width and click the mobile navigation dropdown button and then resize the window back to desktop size, the mobile menu remains visible instead of changing back to display:none. Unfortunately this site is still in staging so I cannot show you a live example, but I was hoping someone could point me in the right direction of getting that DIV to become hidden again once the window is resized back to full screen.
Also, I realize that the chances of this scenario playing out in the real world are slim, but the client would like for it to be addressed anyway.
Thanks!
I figured out that it was javascript that was showing the DIV in the first place, not a media query, so I just added display:none to the div for the Desktop media query and the issue has gone away. Thanks!
Related
I have a fully functionnal SPA website (Reactjs) which I just made responsive. Everything went smooth except that the site refuses any "scroll movement" on the body, preventing the mobile browser bottom bar to disappear. It is a one page website which I created to have everything displayed full-screen (no need to scroll anything), so I suppose that it is CSS linked, but I just have absolutely no clue on what is happening. Actually, on my Samsung S20+, only the opened burger menu accepts any page scroll movement, permitting me to hide those navigator bars (up and bottom). But once again, I see no specific CSS differences between that burger menu and the main page. Could anyone help me on this ? I'm so lost with it that I don't even know what kind of information I could add in this post except the URL of the website: https://www.epistolads.net.
NB: the sources maps are available on the website, for testing purpose
EDIT 1: just noticed that I can achieve the desired result (scroll on page to hide nav bar) by first zooming a little, if it speaks to anyone.
EDIT 2: Also, I may no "refresh the website" by scrolling "out of screen" up.
Ho mine, got it ! Some month ago, to be sure that no forgotten content gets out of the screen, I added a "overflow-y: hidden;" on the body of the index.html file itself! Changing it back to "auto" gave me back full control on mobile. In case of other people would meet the same problem...
I have the next question. I am developing a react application with some images. The user has the possibility to click and open a full-page image. Because the image's orientation is horizontal on the mobile, it does not look good. My idea is when the user clicks on the full page icon, the orientation of the phone becomes horizontal as is implemented on youtube. I tried to find some information about that, but I am not sure if it is even possible, I saw that only by using react native and developing mobile applications you can have access to the user's orientation of the screen. But maybe there are some methods to do in the browser? Thanks in advance.
It is not possible to change this from the web, however you could simply rotate the image and display it full screen. This has been done here:
CSS Rotate Portrait Image 90 Degrees and Make Image Full Screen
The black screen is visible for a moment at the start of the app in android devices. I've tested in all of my recent apps and it is there. In some devices, the black screen appears a bit longer especially in oreo.
Have a look at the video here
How can I solve it?
This is triggered because your start method is taking too long to process the Form or the Form's rendering code is too slow. When that happens Android tries to draw your app but it takes too long and so it just shows what it has.
Remove the clutter from start and just show a Form that's a splash screen then transition to the actual app. Optimize your actual app UI by using profilers & the performance monitor tool.
In my opinion, showing a splash screen before the actual app (as suggested by Shai) is a good idea to be sure that all the splash screen images generated for iOS by the Codename One build servers are as you want them: in this way, the app startup look will be very similar on iOS and Android. Some popular app, like Facebook, use a splash screen that show their icon at the middle of the screen.
However, about your question, in my "new" Android 7 device, almost "all" the apps, even the ones preinstalled with Android, show a blank screen for a fraction of second at startup. So I suppose that it's normal. That blank screen is usually white, but is some app the color of the blank startup screen is different (for example, in ES File Manager is gray). Also my Codename One apps show a blank white screen at startup (before the splash screen in the apps in which I implemented it). Maybe the color of the startup blank screen depends on the styling of the app.
The landing page for site http://www.kisadesign.co.uk works for desktop but when viewed on mobile and tablet the ability to scroll has gone so all you can see is the navigation and top block. It's responding to the media queries but can't scroll down. Any ideas on how to fix this?
I'm not sure what jquery you use for the parallax scrolling but I use Skrollr for my website that it works pretty well for mobile devices.
https://github.com/Prinzhorn/skrollr
I’m trying to deploy a CSS3-based horizontal navigation menu on a still-under-construction site I’m working on.
Hover or mouseover one of the menu’s titles and a drop-down menu appears. Move the mouse off of the title, or off of the list of dropdown items, and the menu collapses. So, the dropdown list of items stays open as long as it can ‘see’ the mouse pointer.
The menu features containers that allow for the presentation of content from the site, or even other sites. E.g., it can display images or entire webpages. I’m attempting to display an object created with Microsoft’s Silverlight platform. The object is embedded on another page of my site and, via php include, it plays well with the menu in all browsers I’ve tested it on … except Microsoft Internet Explorer 9. (Haven't tried IE10 yet.)
In the IE9 case, the Silverlight object appears as expected, but the dropdown menu collapses as soon as the mouse touches the displayed Silverlight object. I.e., the CSS3 menu loses sight of the mouse and the dropdown collapses the moment the mouse pointer touches the Silverlight object.
I haven't been able to find much in the way of help for this one.
Any thoughts or guidance are much appreciated. Thanks.