Home Forums Archived Forums Mobile View Redirect user to page if mobile and removing menu item if mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #17596
    techryan
    Participant

    Hey All,

    I’d like to know if it’s possible to redirect someone to another page if they are mobile. Right now the main page at http://3dachshundsbeer.com looks horrid on mobile. I am including the css that I implemented below (I think it’s responsive but it doesn’t appear to be doing what I want it to do)
    Essentially if I can’t get the main page to look good I would like to defer them to the /home/ page if they are on mobile.
    Furthermore, the store icon that has align right on it does not look good on mobile, can I hide that menu item since it’s already in the menu on the left if they are on mobile devices?
    body.page-id-880 {background-image:url(‘http://3dachshundsbeer.com/wp-content/uploads/Launch.jpg’)!important; no-repeat center center fixed
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
    .page-id-880 #wrapper {width: 30%;
    background: rgb(38, 38, 37); /* Fallback */
    background: rgba(38, 38, 37, 0.7);
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);}

    Many Thanks!
    #21211
    scrambler
    Moderator

    if the reason is you dont like how the landing page looks on mobile may be we should start there if you can explain what you wish to change.

    If I had to guess, I would replace your current rule

    .page-id-880 #wrapper {width: 30%;
    background: rgb(38, 38, 37); /* Fallback */
    background: rgba(38, 38, 37, 0.7);
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);}

    by

    .page-id-880 #wrapper {max-width: 400px;
    background: rgb(38, 38, 37) !important; /* Fallback */
    background: rgba(38, 38, 37, 0.7) !important;
    margin-top: 20%;}

    But if you simply explain what you would want the behavior to be, we can do that.

    We can also change the style completely using media rules on phone and small tablets.

    Just tell us what you wish to see

    #21212
    techryan
    Participant

    Thanks scrambler. I had a feeling it had something to do with the width not being defined, just wasn’t sure the best way to go about that. Looks a lot better now.

    Concerning the menu. I would like to remove the store button that is float right in css. something similar to visibility: hidden but only if mobile.
    .onlineshop {float:right !important;}
    #21213
    scrambler
    Moderator

    You can add the rule below in Advanced options > Head Section > Custom CSS Rule box

    @media only screen and (max-width:640px) {
    .onlineshop {display:none;}
    }

    using the threshold you want

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘ Mobile View’ is closed to new topics and replies.