Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #219640

    Though the site is live, with many mentions of the beautiful theme from our users, there are two things I’d like to fix dealing with Mobile devices. Can you please help me with this?

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

    1- The Reserve Now button is placed arbitrarily on normal view and iPhone (480px), but not for tablet displays where it tends to stack on the social media icons (the phone number is doing the same thing on tablets, so I added the code below for that as well. Is there a fix for this? I tried using the same code as I did with the smartphone but with 768px. That did not work. Here’s the code that worked for the first 2 devices.
    /* Add Reserve Now button to Header-added code to header.php*/
    .header-button {
    position: absolute;
    border: none;
    top: 0;
    left: 255px;
    right: 180px;
    }
    .header_color .header-button a {
    display: block;
    padding: 2px 5px 10px 12px;
    font-size: 22px;
    text-align:justify;
    font-weight: bold;
    float: left;
    color: #f8d699;
    border-radius:0px 0px 15px 15px;
    }
    .header-button a.header-chat { background-color: #985e06; left center no-repeat; }
    .header-button a.header-chat {link: href=”http://reservation.worldweb.com/hotel/1227″ target=”_blank” }
    }
    /* Get Reserve Now button on iPhone*/
    @media only screen and (max-width: 480px) {
    .header-button {
    position:absolute;
    top:90px;
    left:30px;
    right:20px;
    }
    }
    /* Sizes/styles phone#, */
    #top .social_bookmarks li a { font-size: 18px; }
    .social_header .phone-info span {
    font-size: 18px;
    color: #f8d699;
    font-style: italic;
    padding-right: 28px;}
    }

    2- We alternately use 2 of 3 layer sliders, but want NONE of them to show on smartphones. Just using the first bit of code stopped the #10 slider from being displayed, but using the same code with the different variables did not. I also tried using ‘all’ in place of the numbers, but that didn’t work either.

    How do I repress all of the layer sliders on smartphones?

    /* Remove Layer Slider on Smartphone*/
    @media only screen and (max-width: 480px) {
    /* Add your Mobile Styles here */
    #layerslider_10 {
    display: none!important; }
    }
    /* Remove Layer Slider on Smartphone*/
    @media only screen and (max-width: 480px) {
    /* Add your Mobile Styles here */
    #layerslider_18 {
    display: none!important; }
    }
    /* Remove Layer Slider on Smartphone*/
    @media only screen and (max-width: 480px) {
    /* Add your Mobile Styles here */
    #layerslider_19 {
    display: none!important; }
    }

    #219791

    Hi Lynn!

    1.) Use this for the button:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .header-button {
    right: 200px;
    width: 200px;
    }
    }

    2.) Hide the layer slider on mobile devices using this:

    @media only screen and (max-width: 768px) {
    .avia-layerslider {
    display: none;
    }
    }

    Regards,
    Ismael

    #219934

    Hi Ismael,
    Thanks for your help, but neither of these worked. I even tried a couple of variations.

    For the header button -nothing happened.

    For the Layerslider, nothing happened even though I changed the code from the original to the one you suggested. The #10 layersilder was still suppressed, but the other one (#18) is still showing. So I’d say it’s not reading the update.

    Thanks -Lynn

    #220729

    Hi!

    1- Please try following code

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .header_color .header-button a { left: -40%!important; }}

    2-

    @media only screen and (max-width: 768px) {
    .avia-layerslider { display: none; }}

    If Quick CSS does not work, please try adding the code to bottom of Style.css file of your child theme in Appearance > Editor

    Regards,
    Yigit

    #221237

    Hi there,
    Thanks for your continued help on this. So close… but neither of these snippets or putting it into Enfold Child> style.css worked. And now the Reserve Now button which had been working on the smartphone, is no longer appearing at all.
    I hate to do this (because it gets so long) but I’ve pasted all my code in the style.css below. Can you see anything wrong, conflicting or have any ideas on what to do next? Thanks again, Lynn

    /*
    Theme Name: Enfold Child
    Description: A Child Theme for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
    Version: 1.0
    Author: Kriesi
    Author URI: http://kriesi.at
    Template: enfold
    */

    /*Add your own styles here:*/
    /* Hide layerslider on Smartphones and protrait Tablets */
    @media only screen and (max-width: 768px) {
    .avia-layerslider { display: none; }}
    /* Place Reserve now on tablets */
    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .header_color .header-button a { left: -40%!important; }}
    /* Add Reserve Now button to Header-added code to header.php*/
    .header-button {
    position: absolute;
    border: none;
    top: 0;
    left: 255px;
    right: 180px;
    }
    .header_color .header-button a {
    display: block;
    padding: 2px 5px 10px 12px;
    font-size: 22px;
    text-align:justify;
    font-weight: bold;
    float: left;
    color: #f8d699;
    border-radius:0px 0px 15px 15px;
    }
    .header-button a.header-chat { background-color: #985e06; left center no-repeat; }
    .header-button a.header-chat {link: href=”http://reservation.worldweb.com/hotel/1227″ target=”_blank” }
    }
    /* Remove from home page only (right side)#, */
    .breadcrumbs { display: none; }
    .page-id-2 .entry-title { display: none; }
    .sub_menu {
    right: 175px !important;
    }
    /* Added TripAdvisor to ‘register-admin-options.php’ file, then to child functions.php Moves social icons to right of page */
    #top .social_bookmarks li {
    float: right !important;
    }
    /*Dropdown menu on top of LayerSlider*/
    .container_wrap, #header_main { z-index: 1; }
    /* Sizes/styles phone#, */
    #top .social_bookmarks li a { font-size: 18px; }
    .social_header .phone-info span {
    font-size: 18px;
    color: #f8d699;
    font-style: italic;
    padding-right: 28px;}
    }
    /* Change color of header social fonts*/
    .header_color .social_bookmarks a { color: #f8d699; }
    /*size main menu font*/
    #avia-menu a {
    font-size: 17px !important;
    }
    /* Color hover of TripAdvisor*/
    #top .social_bookmarks_tripadvisor:hover a {
    color:#fff;
    background-color: #29A959!important;
    }
    /* Color main menu dropdown font*/
    #top .main_menu .menu li ul a {
    color: #f8d699 !important;
    opacity: .7;
    }
    .header_color .main_menu ul:first-child > li > a { color: #f8d699; }
    .slide-meta {display: none;}
    .blog-categories.minor-meta {display: none;}
    .text-sep.text-sep-cat {display: none;}
    .header-buttons {
    position: absolute;
    right: 0;
    border: none;
    }
    /* Get Reserve Now button on iPhone*/
    @media only screen and (max-width: 480px) {
    .header-button {
    position:absolute;
    top:90px;
    left:30px;
    right:20px;
    }
    }
    /*Dropdown menu on top of LayerSlider*/
    .container_wrap { z-index: 1;
    }
    /* Sidebar styling -latest portfolio widget*/
    #portfoliobox-2 .news-headline {
    font-size: 16px !important;
    }
    #portfoliobox-2 .news-excerpt {
    font-size: 12px !important;
    }
    .image_size_widget .news-thumb {
    height: 50px;
    width: 50px;
    }
    .image_size_widget .news-thumb img {
    width: 46px;
    height: 46px;
    }
    }
    add_theme_support(‘avia_template_builder_custom_css’);

    #221838

    Hi!

    I’m not sure if this is at all related but that last line is php and should go in your functions.php file.

    Cheers!
    Devin

    #221860

    Thanks Devin,
    I fixed that, but it did not resolve anything.
    -Lynn

    #222025

    Hi Devin,
    I was wondering why I had that php in my style.css. I found it referenced a the link below, so you might want to update it. http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/.

    I have gone over all my code. I found that I had this piece of php in the child > style.css (and in the functions.php) and I’ve removed it:
    .header-button a.header-chat {link: href=”http://reservation.worldweb.com/hotel/1227″ target=”_blank” }

    I also had this in twice, but when I tried removing the extra one, I would lose my social icons settings:
    .container_wrap { z-index: 1;}

    The thing is that I can get the top navigation (social icons, phone and reserve now button) to work right on the laptop/pc, but not on the smartphone. BUT when I try to fix it on the smartphone or remove the layerslider it breaks. I’ve been trying to make these last two changes in the QuickCSS, since the other code has been tested and seems to be working. I did try adding this last code to the style.css as Yigit suggested, but that broke the other code too.

    This site is now live so I’m a bit anxoius to get it fixed. I’m also concerned that the site seems unstable. If it is something that I did by adding code in, then I’d like to know how to go about stabilizing it. Is it possible that I have reached the extent that this theme should be customized? Sorry, I just want to have realistic expectations and a working website.

    Thanks -Lynn

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Mobile Device display -suppressing Layerslider and controlling button display’ is closed to new replies.