Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 2, 2016 at 6:41 pm #694345
    FreelanceWeb

    Hi,

    I’m trying to hide/show the same element with slight modifications for optimisation for large screens, average laptops & mobile devices.

    Basically I need to change the display setting for portrait background images I have on a grid row in order that they display properly on all three device sizes.

    This is the code I’m using in quick CSS.

    @media only screen and (min-width: 990px) {
    .show-on-mobile { display: none !important; }}
    @media only screen and (max-width: 990px) and (min-width: 1500px) {
    .show-on-laptop { display: none !important; }}
    @media only screen and (max-width: 1500px) {
    .show-on-large-screen { display: none !important; }}

    Can you tell me where I’m going wrong?

    K Rgds,
    C

    October 3, 2016 at 5:45 am #694422
    Jordan

    Hey Ciaran1212,

    Thanks for reaching out to us!

    Please post us your login credentials (in the “private data” field), so we can take a look and inspect further.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Jordan

    October 3, 2016 at 11:01 pm #694794
    FreelanceWeb

    Hi, thanks for coming back to me,

    C

    October 6, 2016 at 7:36 am #695882
    Ismael

    Hey!

    You should check this list of css media queries for standard devices. https://css-tricks.com/snippets/css/media-queries-for-standard-devices

    Or try to replace it with the following code:

    @media only screen and (min-width:1600px) {
	.show-on-laptop { display: none !important; }
}

@media only screen and (max-width: 1600px) {
	.show-on-large-screen { display: none !important; }
}

@media only screen and (max-width: 1200px) {
	.show-on-laptop { display: none !important; }
}

@media only screen and (min-width: 1024px) {
	.show-on-mobile { display: none !important; }
}

    Regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.