Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 13, 2014 at 11:46 am #208892
    Lynnr321

    I am having a couple of issues that I cannot seem to resolve and I hope you can help me with.I am really liking this theme. It’s beautifully designed and well thought out.

    You can find the website at this link: http://bit.ly/1fqPkFc
    1- I’ve added a ‘Reserve Now’ button to the header. It does not appear on smartphones (and it needs to) and when it appears on a tablet it is laying over the phone number.
    2- The tinted screen behind the words of the layer slider does not maintain its size on smartphones or tablets. I either need it to fill the space behind the text of each slide or have it not appear at all for those devices.
    3- On an android tablet the main menu has a grey block behind it when in hover state.

    January 13, 2014 at 1:15 pm #208909
    Richard Olpin

    Personally I’d hide the layer slider on phones anyway. They get annoying really quick if they’re in the way of content on a small device..

    January 13, 2014 at 2:59 pm #208958
    Ismael

    Hey!

    1.) Please add this on custom.css or Quick CSS to move the reserve now button when viewing on iPad:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.header-buttons {
left: 0;
}
}

    2.) How did you add the content boxes on the layer slider? You can a unique css selector to each layer. Edit the layer then go to Attributes panel. You can use this selector to hide the layer on mobile devices using media query.

    3.) Can you please post a screenshot of the issue? Add this on Quick CSS:

    #top .main_menu .menu li:hover {
background: transparent;
}

    Regards,
    Ismael

    January 14, 2014 at 5:31 pm #209547
    Lynnr321

    Hi again,
    1- this did not work, I even added an !important; to the last line.
    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .header-buttons {
    left: 0;
    }

    Here is my current code, that I’ve added in the Quick CSS:
    /*Add reserve now button to Header-added code to header.php*/
    .header-buttons {
    position: absolute;
    right: 0;
    border: none;
    top: 0;
    left: 495px;
    }
    .header_color .header-buttons a {
    display: block;
    padding: 2px 7px 5px 7px;
    font-size: 21px;
    font-weight: bold;
    float: left;
    color: #f8d699;
    border-radius:0px 0px 15px 15px;
    }
    .header-buttons a.header-chat { background-color: #985e06; left center no-repeat; }
    /*Color hover of TripAdvisor*/
    #top .social_bookmarks_tripadvisor:hover a {
    color:#ff;
    background-color: #29A959;
    }
    /*testing- Move Reserve button on iphones*/
    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .header-buttons {
    left: 0px !important;
    }

    2. As you suggested, I’d like to hide the layerslider on mobile. Can you tell me how to do that? Do I still need to assign a css selector? If so, can you point to or share more info on how to do that? I’m only familiar enough with it to be dangerous at this point.

    Thanks -Lynn

    You can find the website at this link: http://bit.ly/1fqPkFc

    January 14, 2014 at 9:24 pm #209693
    Yigit

    Hi!

    Please add following code to Quick CSS as well
    1-

    @media only screen and (max-width: 480px) {
.header-buttons {
left: 0!important;
}
}

    2-

    @media only screen and (max-width: 480px) {
#layer_slider_1 { display: none; }}

    Regards,
    Yigit

    January 16, 2014 at 4:19 pm #210713
    Lynnr321

    This thread was closed but the problem is not solved. What do I do? Repost it?
    Sorry, Yigit, neither of the answers above work.

    Here is my code:
    /* Testing- Get Reserve button on iPhone*/
    @media only screen and (max-width: 480px) {
    .header-buttons {
    left: 0!important;
    }
    }
    /* Testing – Remove Layer Slider on Smartphone*/
    @media only screen and (max-width: 480px) {
    #layer_slider_1 { display: none; }}

    Update 19Jan2014-
    I was able to correct this using this code:
    /* Testing – Remove Layer Slider on Smartphone*/
    @media only screen and (max-width: 480px) {
    /* Add your Mobile Styles here */
    #layerslider_10 {
    display: none!important; }
    }
    /* Get Reserve Now button on iPhone*/
    @media only screen and (max-width: 480px) {
    .header-button {
    position:absolute;
    top:90px;
    left:30px;
    right:20px;
    }
    }
    Note: Layerslider is one word.

    • This reply was modified 10 years, 10 months ago by Lynnr321.
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Mobile issues with header buttons, layer slider and menu’ is closed to new replies.