Archived topic

Mobile-Selector in CSS

3 replies · Started by Franz Csan on January 17, 2015

Viewing posts 1–4 of 4

January 17, 2015 at 5:30 am #66084

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

January 17, 2015 at 11:13 am #66128

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 :)

January 17, 2015 at 11:54 am #66183

... so simple ... :-o

Thank you!!! :-)

January 17, 2015 at 12:01 pm #66185

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.