Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 19, 2016 at 7:42 pm #617645
    web6s

    Hello
    I have the quick CSS in place for hiding select elements on mobile. I need a similar one for desktop and tablets.
    Is this possible?

    Thanks!

    April 19, 2016 at 8:25 pm #617662
    begrafiks

    Hi @web6s;
    yes it is possible, you can find more information here : “hide menu items/elements on mobile“

    April 19, 2016 at 8:34 pm #617668
    Basilis

    Hi!

    Please do let us know if that fits your need, so we can help you further if not.

    Regards,
    Basilis

    April 19, 2016 at 8:46 pm #617676
    web6s

    Thanks for the reply.
    This is not quite what I need though. I am actually looking for the opposite. I need to hide select elements on desktop/tablet, thusly showing them on mobile only.

    I am already using the quick CSS in the link above to hide certain elements on mobile. It may help if I explain what it is that I am trying to do.

    When mobile visitors come to the site, I want to show them completely different content than a desktop/tablet visitor. I know I can do a homepage redirect upon mobile detection but for SEO reasons I do not want to do this. I want the traffic to funnel through the homepage, not redirect around it.

    April 19, 2016 at 8:56 pm #617679
    web6s

    To explain further, see mockup at this link: http://bit.ly/1peOPnt

    Hope this makes sense. If there is another way I can do this without a mobile redirect please advise. I am not experienced with custom coding so I am hoping to use the quick CSS option within the theme.

    Thanks

    April 19, 2016 at 10:56 pm #617752
    begrafiks

    Hi @web6s;
    to have a different content for each (mobil and desktop) is possible.
    to that you should give an “id” or “class” to your elements.

    Just an example :
    Color section (I give an id : my_section_desktop)
    Color section (I give another id : my_section_mobil)

    In the css style :

    /*HIDE ON DESKTOP*/
#my_section_mobil {display: none !important;}

/*Telephone Styles */
@media only screen and (max-width: 767px) {
/*HIDE ON MOBIL*/
#my_section_desktop {display: none !important;}
/*SHOW ON MOBIL*/
#my_section_mobil {display: block !important;}
}
    • This reply was modified 8 years, 7 months ago by begrafiks.
    April 22, 2016 at 11:17 am #619758
    Andy

    Thanks a lot @begrafiks


    @web6s
    Please let us know if you need any further help with this.

    Cheers!
    Andy

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