Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1193645

    Hello,
    After updating to Enfold latest version I have a problem wirth sticky footer in mobile mode (resolution under 1150px):

    > footer height is too low
    > buttons are half visible
    > in very low resolution they don’t appear on the same line

    I tried to modify previous settings in style.css but it does not make any effect.

    This is footer widget code

    
    <div id="outer">
    
    <div class="inner"><a class="avia-button avia-color-custom avia-size-small classe-bouton-autre-footer" style="background-color: #258799; color: #ffffff;" href="Tel:+33695363908">[av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' size='18px' position='center' color='' av_uid='av-2a1d4h'][/av_font_icon]</a></div>
    
    <div class="inner"><a class="avia-button avia-color-custom avia-size-small open-popup-link classe-bouton-autre-footer" style="background-color: #258799; color: #ffffff;" href="#test-popup">[av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' link='' linktarget='' size='18px' position='center' color='' av_uid='av-2844u9'][/av_font_icon]</a>
    <div id="test-popup" class="white-popup mfp-hide">[av_contact email=' (Email address hidden if logged out) ' title='Votre message' button='Envoyer' on_send='' sent='Merci, on vous répond très rapidement !' link='manually,http://' subject='' autorespond='' captcha='' form_align='' color='' admin_preview_bg='' av_uid='av-cq78u9']
    [av_contact_field label='Nom' type='text' options='' multi_select='' av_contact_preselect='' check='is_empty' width='' av_uid='av-adz1w1'][/av_contact_field]
    [av_contact_field label='Téléphone' type='text' options='' check='' width='' av_uid='av-8snnhd'][/av_contact_field]
    [av_contact_field label='Adresse mail' type='text' options='' multi_select='' av_contact_preselect='' check='is_email' width='' av_uid='av-6weaz5'][/av_contact_field]
    [av_contact_field label='Sujet' type='text' options='' multi_select='' av_contact_preselect='' check='is_empty' width='' av_uid='av-697gyp'][/av_contact_field]
    [av_contact_field label='Message' type='textarea' options='' multi_select='' av_contact_preselect='' check='is_empty' width='' av_uid='av-4lc4dd'][/av_contact_field]
    [/av_contact]</div>
    </div>
    
    <div class="inner"><a class="avia-button avia-color-custom avia-size-small classe-bouton-autre-footer" style="background-color: #258799; color: #ffffff;" href="https://wa.me/33695363908">[av_font_icon icon='ue800' font='fontello' style='' caption='' link='' linktarget='' size='18px' position='center' color='' av_uid='av-2a1d4h'][/av_font_icon]</a></div>
    
    <div class="inner"><a class="avia-button avia-color-custom avia-size-small classe-bouton-autre-footer trekker-pro-booking" style="background-color: #258799; color: #ffffff;" href="https://book.trekker.fr/canyon-spirit" target="blank">[av_font_icon icon='ue859' font='entypo-fontello' style='' caption='' link='' linktarget='' size='18px' position='center' color='' av_uid='av-2a1d4h'][/av_font_icon]</a></div>
    
    </div>

    This is css related to widget code

    @media only screen and (max-width: 1150px) and (min-width: 767px) {
    #footer { padding: 0 !important; }
    #footer .widget{
    	margin-top:-22px!important;
    	margin-bottom:-30px!important;
    }
    .classe-bouton-reserver-footer {
    	min-width: 220px!important;
    	max-width: 220px!important;
    	min-height: 40px!important;
    	max-height: 40px!important;
    	transform: translate(0%, -6%);
    }
    
    .classe-bouton-autre-footer {
    	min-width: 120px!important;
    	max-width: 120px!important;
    	min-height: 40px!important;
    	max-height: 40px!important;
    }
    }
    
    @media only screen and (max-width: 766px) {
    #footer { padding: 0 !important; }
    #footer .widget{
    	margin-top:-22px!important;
    	margin-bottom:-50px!important;
    }
    
    .classe-bouton-reserver-footer {
    	min-width: 120px!important;
    	max-width: 120px!important;
    	min-height: 40px!important;
    	max-height: 40px!important;
    	transform: translate(0%, -6%);
    }
    
    .classe-bouton-autre-footer {
    	min-width: 80px!important;
    	max-width: 80px!important;
    	min-height: 40px!important;
    	max-height: 40px!important;
    }
    }
    

    Many thanks in advance for your help.

    • This topic was modified 4 years, 8 months ago by kumharas.
    #1193762

    Hello,

    I finally solved the problem.
    Actually there is a bug: when modifying #footer .widget margin in style.css and saving this file, nothing happens when trying to view the result in a browser (no server-side cache plugin, purging browser cache ).
    The workaround I found was to disable widget and socket in Enfold child theme option and then re-enable it to have ccs modification to take effect.

    Something that could be solved in future releases.

    Regards.

    #1194476

    Hi kumharas,

    Glad you got it working for you! :)

    Yes, when you’re working on the css anywhere, merging has to be disabled. It can be enabled when all css changes are done.

    If you need further assistance please let us know.

    Best regards,
    Victoria

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