Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • February 20, 2020 at 9:53 pm #1186552
    JZNAMZ

    The website is located at: namzcustomcycleproducts.com

    The initial page to load for desktops should be: desktop-home

    When I set the static page to load first, using the desktop page as the one to load first, and then I browse to the .COM, the content in the middle of the page does not appear.

    If I browse to the .COM followed by /desktop-home then the content appears correctly.

    What is happening?

    February 20, 2020 at 11:24 pm #1186576
    JZNAMZ

    The situation is as follows:

    When someone visits the website using the .COM name, I have been using a custom page template in the child theme directory in order to direct a desktop visitor to a desktop home page. If the visitor is a mobile device, I am directing someone to a different, mobile-friendly page.

    In the theme options, the initial page to load is the page that refers to the custom page template. However, the PHP code in the custom template is no longer working.

    The code in the page template is as follows:

    <?php
if(wp_is_mobile()) {
  header("Location: https://namzcustomcycleproducts.com/mobile-splash/");
  exit();
}
else {
  header("Location: https://namzcustomcycleproducts.com/desktop-home");
  exit();
}
    February 23, 2020 at 10:36 pm #1187138
    Mike

    Hi,
    Sorry for the late reply, I have taken a look at your site and tested your two landing pages and found the redirect to /mobile-splash/ didn’t occur for me. Unfortunately, I believe it is with wp_is_mobile() which is not very good because it checks some user agents and not the screen width. There are many plugins that can perform this function for you much better, but seeing the difference between your two pages I would only use one page with both of the elements on it, one section with the custom ID “mobile” and another the custom ID “desktop” and then add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 430px) {
#desktop {
display:none!important;
}
} 
@media only screen and (min-width: 431px) {
#mobile {
display:none!important;
}
}

    I like this solution because it is well supported among browsers and doesn’t redirect your visitor, which some browsers will block or give a warning about.
    Hope this helps.

    Best regards,
    Mike

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