Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1014911

    Hi:

    I have a responsive issue I cannot solve concerning the “Phone Number/small info text” content. It is a heart icon, for favorites, which is linked to a page—code is below. It should remain where it is at about 990px when the mobile menu breakpoint kicks in, and the secondary menu remains where it is. But it does not. It drops down a line and becomes centered. I cannot fix it though I’ve tried everything.

    I have it so it shows and works very nicely on mobile phones below about 767px. Between about 990 and 767 it drops down a line and becomes centered—but it should stay to the left of the secondary menu—”Careers”—and not drop down a line until it hits 767 where it breaks again. After 767 it works perfectly.

    Can you help with this? It is a real estate site and about 75% of real estate viewers use mobile, so it must work well.

    Below is all the related code and CSS I am usingand I have added login credentials for you.

    Here is the code in the small info text field:
    ______________________________________________________________________
    (hosted on WPengine) target="_blank" rel="noopener">

    Below is all the CSS I am using—some is essential to show th mobile menu whiole scrolling:
    ______________________________________________________________________

    /*—-SECOND MENU AND X-ELEMENT—-*/

    @media only screen and (max-width: 767px) {
    .responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
    float: right;
    width: 100%;
    text-align: right;
    margin: 0;
    margin-right: 12px;
    }
    }
    @media only screen and (max-width: 767px) {
    .responsive .phone-info {
    float: right;
    width:100%;
    clear: both;
    text-align: right;
    margin-top: -30px;
    }
    }

    @media only screen and (max-width: 1200px) {
    .responsive #top #header .social_bookmarks {
    display: block !important;
    }
    }

    /*—-END SECOND MENU AND X-ELEMENT—-*/

    /* —- MOBILE MENU BREAKPOINT —- */

    @media only screen and (max-width: 1200px; min-width: 768px) {
    .html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none !important;}
    .html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block !important;}
    .html_mobile_menu_tablet #mobile-advanced{display:block !important;}
    }

    /* —- END MOBILE MENU BREAKPOINT —- */

    /* —- KEEP MOBILE MENU VISIBLE SCROLL —- */

    #advanced_menu_toggle, #advanced_menu_hide {
    position: fixed !important;
    right: 3% !important;
    top: 5% !important;
    }

    @media only screen and (max-width: 1200px) {
    #wrap_all {overflow: hidden !important; /*needed for mobile menu scrolling */}
    }

    @media only screen and (max-width:1200px) {
    .responsive #top #wrap_all #header {
    position: fixed !important;
    }
    .responsive #top #main {
    padding-top: 80px !important;
    }
    }

    @media only screen and (max-width: 1200px) {
    #top #menu-item-search {
    display: none;
    }
    }

    @media only screen and (max-width: 1200px) {
    .main_menu{ right: -5px !important;}
    }

    /* —- @media only screen and (max-width: 767px) {
    #top .social_bookmarks { display: none !important; }} —- */

    /* —- END KEEP MOBILE MENU VISIBLE SCROLL —- */

    #1015119

    Hey blaircomm,

    Thank you for using Enfold.

    This css code should help.

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive.html_mobile_menu_tablet .phone-info {
        float: right;
        width: auto;
        clear: none;
        text-align: right;
    }
    }

    Best regards,
    Ismael

    #1015460

    Magnificent!

    Thank you.

    — Michael

    #1015499

    Hi,

    I’m glad that was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Phone Number/small info text responsive behavior’ is closed to new replies.