Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #316125

    Hey guys,
    just need a hand wqith how this page is rendering on the mobile device.
    Custom work was done to the header:
    #top #header_meta a, #top #header_meta ul, #top #header_meta li, #top #header_meta .phone-info {color: #333333;border-color: red;}
    /*#top #wrap_all #header_meta .phone-info {position: absolute;right: -15px;top: 40px;}*/

    See how it’s affecting the mobile.

    The bigger challenge is with how the content within the COLOR SECTION is rendering on the phone. It doesn’t seem like the FORM wants wrap onto it’s own row. It’s butting up against the image on the mobile phone. Is this because the defined regions 2/3 and 1/3 are set within a color section? Also know that this was done in order to define a section ID that removes margin space from the 2/3 column and the 1/3 column so that we have one clean horizintal layout with the image on one side….and the form to the right of it with a colored background (red).

    Is there another approach you’d recommend to this? The idea is to have a slideshow to the left, and the form to the right…with the colored background..

    Thanks

    #317058

    Hi Justin!

    This code is overriding the normal responsive behavior of the Enfold columns:

    #home div.av_one_fourth {margin-left:0%!important;width:26.5%!important;background:#c51230;min-height:404px!important;}
    #home div.av_three_fourth {margin-left: 0%!important;width:73.5%!important;background:#c51230;}
    

    I’d suggest removing the width values:

    #home div.av_one_fourth {margin-left:0%!important;background:#c51230;min-height:404px!important;}
    #home div.av_three_fourth {margin-left: 0%!important;background:#c51230;}
    

    Best regards,
    Josue

    #317120
    This reply has been marked as private.
    #317121
    This reply has been marked as private.
    #317129

    Yeah looks better now, add this too so the fields get some space:

    .avia_ajax_form input {
        min-width: 0 !important;
    }

    Cheers!
    Josue

    #317426
    This reply has been marked as private.
    #317602

    Hey Justin!

    I’d suggest including these in the actual menu and setting them a class of “noDesktop”, then with CSS:

    .noDesktop { 
    display: none;
    }

    Cheers!
    Josue

    #318232
    This reply has been marked as private.
    #318266

    Hi!

    You need to enable them in “Screen Options” first.

    Regards,
    Josue

    #318341
    This reply has been marked as private.
    #318354

    Hi!

    Code should be:

    @media only screen and (min-width: 767px) {
    .noDesktop { display: none; }
    }

    Best regards,
    Josue

    #318686

    Thank you Josue!

    #318692

    You are welcome :)

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