Normally I should use transition in CSS to make a mobile menu coming out smooth, however I am missing something with this, which I can't seem to get it right:
https://mobile.tiiny.site/
Any ideas someone?
Thank you very much!
Related
I'm currently facing some difficulty with the hover and active for mobile. Here is a link to my code: https://codesandbox.io/s/inspiring-wozniak-33l61?file=/src/Portfolio.scss
I'm trying to change the background color of the containers when I click for mobile, it currently works for web as it is hover. I've tried adding the :active effect, but it only works on mobile if the user currently holds down the container which is not very ideal. I'm trying to change the background color when the user clicks/touches on the container once instead of holding down.
Any help would be much appreciated, thank you!
You an try detecting browser platform and handle onClick if it is mobile.
A simple, one page view website, which I built on ReactJS started twitching anytime I moved my cursor. It seems like the browser width is changing, with a few pixels of margin added to the right, every time that happens. This doesn't seem to happen when viewing with the Chrome browser in mobile screen mode, under the developer tools. Which probably means it's as a result of the cursur interacting with the page. Has anyone encountered something similar?
It usually happens when you have an element that changes its width, padding, margin or border on hover or a Javascript event. This is not caused by React.
Please, share some css or JS you think may be involved to help more.
I found the bug, an animating component that kept touching the edge of the browser was the issue. I added some margin to the right of the component and the twitching stopped. Thanks to everyone for your help.
I've spent most of the day on this and got nowhere. On a mobile handset the gallery is displayed with the nav arrows superimposed on the image. These are not necessary since swipe is enabled and spoil the look of the image.
I need to hide the arrows for mobile only, is there a recommended way to do this? It seems like a common thing one might want to do, but I can't find anything current on the web.
I've tried some js code to alter the options for the library to no avail, and can't figure out how to do it with a media query to modify the css.
There is an option arrows that you can use to toggle navigation arrows. You could set it by yourself for mobile devices or you can use handy mobile option, like this:
$('[data-fancybox="images"]').fancybox({
mobile : {
arrows: false
}
});
I am developing an app with angular and ionic, and I am facing a strange issue with scrolling.
What I currently have, is a directive to display some temperatures on a page.
Everything works, but if I try to scroll using the mouse wheel (when the mouse cursor hover some text) the page won't scroll. If, however, I have the mouse cursor somewhere else, the page scrolls.
To better explain and show this issue, I've created a codepen which you can find here: http://codepen.io/NickHG/pen/beBGdx
I have no idea why this happens.
Any suggestion?
Thanks
I've found a workaround.
Set overflow-scroll="true" in the ion-content.
If someone can help me with this I will be eternally grateful. Recently I have started an on-line magazine using virb.com to host the site. I have done some basic css alterations to their theme but run into a problem when the theme automatically re-sizes itself for mobiles or even if the browser window is shrunken down. The content goes all whack, probably because of my css alterations. Is there a way that I can disable the responsive theme from resizing or fix my css so it doesn't discombobulate or even just have different page display for mobile users that says something like 'not available for mobile'??
Thanks,
Patrick