Footer and header influence each other and socket edition

Hi,
For your footer page the reason the background image had a gray color above and below it was because the color section was set to 100% of the page height (100vh) where it should have been set to “No minimum height, use content in article to set section height” I adjusted this for you, please clear your browser cache and check.

Best regards,
Mike

Hi,

Since you have selected to use a page to display your footer, you will have to edit the content in that specific page. If you want a regular footer instead, then you can make the necessary adjustments under Enfold->Footer.

Best regards,
Rikard

Hi,

Thanks for the update. If you want a layout like on the page you linked to, then maybe it would be better if you chose the regular footer + socket option under Enfold->Footer? If you need a background in the footer, then we can help you out with custom CSS for that.

Best regards,
Rikard

Hi,
Thank you for the link to your footer but I don’t think I understand correctly because the transparent buttons are side by side when I check, please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
To add a screenshot please try using an Screenshot service and pasting the image URL in your post.
I would like to point out that if you are testing by “Zooming” then this will give you incorrect results, you should instead use the Dev Tools (typically F12, or menu ▸ more tools ▸ developer tools) all browsers have to same Dev Tools and behave basically the same, please read this article for Chrome: Simulate mobile devices with Device Mode, in Safari it’s called Responsive Design Mode

Now the reason your transparent buttons in your custom footer are stacking on smaller screens is because you have them in a 1/3 column:

You should remove this from the column so it will be full width:

and set the alignment to left:

then even on smaller screens they will be in a row:

Best regards,
Mike

Hi,
Thanks for the feedback, at the smallest mobile screen size, 375px, your link text is about half of the screen width with your current font size 13px:

in order to have these in one line at this screen width you will need to back the font size 8px which would probably be hard to read, you can try with this css:

@media only screen and (max-width: 620px) { 
.avia-buttonrow-wrap.footer-buttonrow .avia-button {
    font-size: 8px;
    padding: 9px 2px 7px;
}
}

To remove the border from the buttons try this css:

#top .avia-buttonrow-wrap.footer-buttonrow .avia-button.avia-color-light {
    border: none;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
I mean that for mobile screens to have the footer text in a single line the text will be very small, you can see what I mean by trying this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (max-width: 620px) { 
.avia-buttonrow-wrap.footer-buttonrow .avia-button {
    font-size: 8px;
    padding: 9px 2px 7px;
}
}

if your button text was less characters it would be better perhaps like: Conditions | légales | Confidentialité

To remove the border from the buttons try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top .avia-buttonrow-wrap.footer-buttonrow .avia-button.avia-color-light {
    border: none;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
This is the Enfold ▸ General Styling ▸ Quick CSS field that I spoke of, I add the css for you:

please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike