Is there a website where I can learn the rules of how to make CSS animations on hover on a mobile view?
I mean what are good/bad practices using hover on a desktop vs mobile?
Related
I have a very simple animation that's running and working in our preview tool, but not in the iframe on a webpage.
https://www.triplem.com.au/story/chaz-mostert-s-ford-mustang-declared-a-write-off-following-top-10-shootout-crash-150217
If you open this up in safari in IOS 12 (simulator or real device) it doesn't play the animations.
I'm wondering if there's a quirk where we have to add an attribute the iframe to allow it to repaint? even if I add $('.some-elment').css('background', 'red') it doesn't apply it to the dom as inline styles.
Is there anything anyone can think of?
Here's a preview of the animations working:
https://create.playground.xyz/sefayo/quiet?pos=header-ad&size=320x50&show-engagements=true
So I made a website which has two CSS files; one is for regular desktop computers, and one is for mobile devices with a max width of 480px. Something happened while I was editing my website, and now the mobile version is the only CSS that shows.
I have two CSS' linked in my header, both the mobile CSS and regular (desktop) CSS. When I remove the mobile css link, the desktop version of the website shows like it should. However, when the mobile css stylesheet link is in place, only the mobile website is what shows on both desktop and mobile devices.
When you go onto my website on a laptop, the whole page is shoved to the left, and it is only 480px wide. Any idea what is up?
I figured it out. There was a wordpress plugin called "Above the Fold" which was the problem. I had to link the CSS in the footer.
Is there a way to target css to the mobile menu only? I am using http://athemes.com/theme/Sydney and my dev server is at http://150.101.201.63/wordpress2/WordPress/
Simply put when the menu changes to the mobile menu (one with single button to open menu versus top navigation menu) I want to add some styling. I used to do this by device width but I'm finding this less effective with this theme.
Any help appreciated.
Resize your desktop window to actuate the mobile display of your site and use a web inspector tool in your browser to find the element you'd like to change.
Your Dev site is broken, but Renovation Princess uses the element #respo-menu-list-left to effect portions of your mobile menu.
I tried/guessed it and the url is http://150.101.201.63/wordpress2/wordpress/, so now uppercase in wordpress.
I looked in over the website and when it displays the mobile menu it changes the menu id to mainnav-mobi, so you can safely write you css for that id and it will only show on mobile.
#mainnav-mobi {
/* css here */
}
I want to fix my menu bar.
My menu bar is sticky now. Even a mobile device(like iphone, ipad...) I would like to fix my menu bar not sticky in mobile device.
PC (bigger than ipad) - Sticky menu bar
Mobile (ipad, iphone, etc) - not sticky menu bar
Please use css.
Thank you, have a nice day!
Media Query is your friend if you want to change styles for different devices.
Here are some documents:
MDN - CSS media queries
W3C - Media Queries
Bootstrap is a good example to see how to use media query.
Bootstrap - Responsive utilities - see how it works
Github - bootstrap/less/responsive-utilities.less - source
I am trying to make my mobile site accessible to as many browsers as possible, and I noticed when using the opera mini simulator (http://www.opera.com/mobile/demo/) that it doesn't support css background position - which I'm using to display a sprite for all of my site images. Are there any workarounds for this?
There has to be something else that keeps your code from working, because Opera Mini 6 does actually support background position.
Th website of the company that I am working for uses background position in some places, for example to change the color of the active menu button, and that works just fine. On the other hand there is some other rendering problem that makes it only show part of the button, but that part is the right color...