Media Query Problem on Tablet

  • Resolved justwantanswers

    (@justwantanswers)


    2 years, 11 months ago

    To make my page more responsive, I wanted to do this:
    https://i.stack.imgur.com/YfHL5.png

    So I created two pictures. one in the middle of the text for mobile and one in the adjacent column for desktop.

    Than, I’ve added the following media query to style.css in the WordPress theme editor: 

    
#hide-on-mobile {
	display: none !important;
	visibility: hidden !important;
}
@media only screen and (min-width: 570px) {
	#hide-on-mobile {
		display: block !important;
		visibility: visible !important;
	}
	#hide-on-desktop {
		display: none !important;
		visibility: hidden !important;
	}
}

    It works beautifully on desktop and mobile. But not on tablets; from 570px to 970px (tablet) range, both images appear.

    I don’t know how to fix this, it seems like some king of conflict with the theme or WordPress.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter justwantanswers

    (@justwantanswers)

    Solution and ‘bug’ found:
    The classes hide-on-desktop, hide-on-mobile and hide-on-tablet exist in the Neve theme, which is great.

    However, hide-on-tablet will hide on mobile too not just on tablet.
    To fix this behavior, I modified the theme directly and added a min-width clause for tablets: 

    
@media (min-width: 576px) and (max-width: 959px) {
  .hide-on-tablet {
    display: none;
  }
}

    Hi @justwantanswers!

    We’re glad to hear you managed to fix the issue in the meantime! It would be great if you could mark this thread as resolved.

    Thank you and have a nice day!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Media Query Problem on Tablet’ is closed to new replies.