Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 25, 2015 at 2:11 am #401825
    Munford

    Hi
    On this page:http://www.cjff.dk/forside-2015-2/
    I am trying to swap the #mobile section with #screen on devices,
    and vice versa. It’s not working on my end. I am using this:

    @media only screen and (min-width: 768px) {
    .postid-2731 #mobile {
    display: none!important;
    }
    .postid-2731 #screen {
    display: block!important; }
    }
    @media only screen and (max-width: 768px) {
    .postid-2731 #mobile {
    display: block!important;
    }
    .postid-2731 #screen {
    display: none!important;
    }}

    ?? thanks for taking a look.
    N

    February 25, 2015 at 4:30 pm #402148
    Yigit

    Hey N

    Please use the code as following 

    @media only screen and (min-width: 769px) {
.postid-2731 #mobile {
display: none!important;
}
.postid-2731 #screen {
display: block!important; }
}
@media only screen and (max-width: 768px) {
.postid-2731 #mobile {
display: block!important;
}
.postid-2731 #screen {
display: none!important;
}}

    Cheers!
    Yigit

    February 25, 2015 at 5:15 pm #402180
    Munford

    Isn’t that the same code? I can’t see what the issue is… :(
    also I am getting the same results:
    http://www.cjff.dk/forside-2015-2/
    where both “programs” are showing

    • This reply was modified 9 years, 1 month ago by Munford.
    February 25, 2015 at 5:17 pm #402184
    Yigit

    Hey!

    I changed “min-width: 768px” to “min-width: 769px”. Please try and let us know if it does not help

    Regards,
    Yigit

    February 25, 2015 at 5:20 pm #402189
    Munford

    duh.
    I need more sleep.
    but I am still not seeing it working correctly. cleared the cache

    thanks

    • This reply was modified 9 years, 1 month ago by Munford.
    February 25, 2015 at 5:27 pm #402197
    Yigit

    Hey!

    I did not check the page throughly thinking changing width would help but actually it is not working because it is a page and not a post. So selectors should be changed as following 

    @media only screen and (min-width: 769px) {
.page-id-2731 #mobile {
display: none!important;
}
.page-id-2731 #screen {
display: block!important; }
}
@media only screen and (max-width: 768px) {
.page-id-2731 #mobile {
display: block!important;
}
.page-id-2731 #screen {
display: none!important;
}}

    Cheers!
    Yigit

    • This reply was modified 9 years, 1 month ago by Yigit.
    February 25, 2015 at 5:32 pm #402212
    Munford

    ah very very good thanks.
    That should do it.
    ;)

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘swap sections on mobile not working’ is closed to new replies.