-
Posts
-
I’ve fiddled with this for way too long and can’t get any of the previous answers to this question to work how I would like, which is simply to display multiple Enfold Advertising Area Widgets in a row in the footer so six ads display in the same row.
The site in question is http://theblondeside.com and I want those six ads in the footer to display in a row not underneath each other. I’ve tried multiple variations of the display:inline in the custom css as per previous posts but have not been able to get it to display how I want. Would also like them to stay the same size.
Any suggestions?
I managed to hack it together but hopefully there is a more elegant solution, if not how would I get the overlays to line up or just disable them all together?
section#avia_partner_widget-2{ margin-left: 150px!important; } section#avia_partner_widget-3{ margin-left: 455px!important; margin-top: -180px!important; } section#avia_partner_widget-4{ margin-left: 760px!important; margin-top: -180px!important; } #footer .avia_partner_widget a img{ padding-left: 30px; }I further hacked it with the below to mainly fix the overlay but it is even more hacky now, I wish the plugin supported set rows/cols in the advertising area widget to make this easier:
#footer .avia_partner_widget a:hover .image-overlay{ opacity:0.7!important; left: 30px!important; width: 125px!important; }That hacky CSS completely messes up the layout of the ads on mobile so is there a better way to do it?
Hi,
Thank you for contacting us.
Please remove all previous code and get back to us so we can provide you with fresh CSS to align the footer ads horizontally as seen in the below screenshot from your site. So it won’t look messed up in mobile :)
Best regards,
VinayThanks, I removed the hacky CSS so can you please review and provide a more elegant solution? Sorry I should have removed it but was trying to get the client happy with a workaround.
Hi,
Thank you for removing the CSS hack and getting back to us. After reviewing the layout again it is possible to create this using enfold element without any hacks :)
1. First, create a new page and call it “footer”.
2. Create the 6 columns as mentioned here https://kriesi.at/documentation/enfold/columns/#six-columns-or-more
3. Go to Enfold > Footer > Default Footer & Socket Settings > Page based footer > and select the “footer” page we created.Hope this helps :)
Best regards,
VinayOk so if I am following along then I would add an image to each of the six columns instead of using the advertising area widget? Then for the logo below the ads I’d create 3 columns to center the logo as an image? What will that do with the social media icons and copyright in the footer? Will the socket remain using a page based footer?
OK I did all of that and are relatively happy with it all except for the white band between the footer page and the socket, anyway to get rid of that? I will look into it myself now.
I added the below to custom CSS and it seems to have fixed the white band issue:
#after_section_2{display:none;}Will that potentially break anything else or is that ID unique across the site?
One other issue that I think I actually prefer is that at least on my iPhone 8+ the six columns are all displaying in one row instead of two at a time like the CSS is trying to do for screens less than 768px (8+ is 750px in case my client wants two at a time, how would I fix that?
Hi,
That looks great!
I have updated the code int he documentation please replace the CSS and you should see 2 columns on mobile. Please feel free to change the value of flex-basis to increase or decrease the width of the column along with margin values. If the total width of margin + flex-basis is less than 50% it will be 2 columns, for 3 columns it should be less than 33% and so on.
Hope you are enjoying building the website with Enfold :)
Best regards,
Vinay
- You must be logged in to reply to this topic.