Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Mobile-Selector in CSS

Home Forums Support Mobile-Selector in CSS

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #66084
    Franz Csan

    Unfortunately, I have again a problem 🙁
    In the menu, I added three points as an hover-effect.
    It looks fine on the screen, but on mobile device (for example ios), i will hide this picture. How can i solve this in css? Or can you say me the general selector for mobile?

    .main-navigation ul li a:before{
    	content:url(###/3dots.gif);
    	position: absolute;
    	bottom: -15px;
    	left: 38%;
    	-webkit-transition: opacity 1s ease-in-out;
     	-moz-transition: opacity 0.3s ease-in-out;
     	-ms-transition: opacity 0.3s ease-in-out;
    	-o-transition: opacity 0.3s ease-in-out;
    	transition: opacity 0.3s ease-in-out;
    	opacity: 0;
    }
    
    .main-navigation ul li a:hover:before{
    	zoom: 1;
     	filter: alpha(opacity=50);
     	opacity: 1;
    }

    THX

    #66128
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You can wrap the above code in a media query selecting only larger screens.

    For example:

    @media screen and (min-width: 769px) {
          /* YOUR STUFF IN HERE */
    }

    That should do it 🙂

    #66183
    Franz Csan

    … so simple … 😮

    Thank you!!! 🙂

    #66185
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.