-
AuthorPosts
-
August 28, 2014 at 10:20 pm #310675
hi there,
so i’m trying to do a footer that has 3 columns but the second one is larger.
what i managed to do is on the home page as the last colour section: http://magento.org.il/cloudally/
but i want to put the code of it in the footer widget as 1 column, so that the blog page will still look like i want it to lookso what i did is after publishing the one page, to copy the code of this last section and put it inside the footer widget.
this is what i put in the footer widget as column 1 which will be the only column:
<div id='av_section_1' class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll avia-builder-el-0 avia-builder-el-no-sibling container_wrap fullsize' style = 'background-color: #f2f2f2; ' ><div class='container'><main role="main" itemprop="mainContentOfPage" class='template-page content twelve alpha units'><div class='post-entry post-entry-type-page post-entry-318'><div class='entry-content-wrapper clearfix'> <div class="flex_column av_one_fifth first avia-builder-el-1 el_before_av_three_fifth avia-builder-el-first "> <span class="av_font_icon avia_animate_when_visible av-icon-style- avia-icon-pos-left " style="color:#435f9f; border-color:#435f9f;"><a href='https://www.facebook.com/CloudAllyPage' class='av-icon-char' style='font-size:25px;line-height:25px;' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' ></a></span> <span class="av_font_icon avia_animate_when_visible av-icon-style- avia-icon-pos-left " style="color:#f1f1f1; border-color:#f1f1f1;"><span class='av-icon-char' style='font-size:25px;line-height:25px;' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' ></span></span> <span class="av_font_icon avia_animate_when_visible av-icon-style- avia-icon-pos-left " style="color:#50abf1; border-color:#50abf1;"><a href='https://twitter.com/CloudAlly' class='av-icon-char' style='font-size:25px;line-height:25px;' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' ></a></span> <span class="av_font_icon avia_animate_when_visible av-icon-style- avia-icon-pos-left " style="color:#f1f1f1; border-color:#f1f1f1;"><span class='av-icon-char' style='font-size:25px;line-height:25px;' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' ></span></span> <span class="av_font_icon avia_animate_when_visible av-icon-style- avia-icon-pos-left " style="color:#dd4b39; border-color:#dd4b39;"><a href='https://plus.google.com/+Cloudally/posts' class='av-icon-char' style='font-size:25px;line-height:25px;' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' ></a></span> </div><div class="flex_column av_three_fifth avia-builder-el-7 el_after_av_one_fifth el_before_av_one_fifth "> <section class="av_textblock_section" itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_textblock ' itemprop="text" ><div class="footer_links" style="text-align: center;"><a id="footer_links_home" href="/">Home</a> <span class="footer_devider"> | </span> <a href="/Blog">Blog</a> <span class="footer_devider"> | </span> <a href="/cloudally-faq">FAQ</a> <span class="footer_devider">| </span> <a href="/terms-of-use" rel="nofollow">Terms of Use</a> <span class="footer_devider">| </span> <a href="/privacy-policy" rel="nofollow">Privacy Policy</a> <span class="footer_devider">| </span> <a href="/why-choose-cloudally">Why CloudAlly</a><span class="footer_devider"> | </span><a href="/catalog">Backup Services</a><span class="footer_devider"> | </span><a href="/contact-us">Contact Us</a><br /> <a href="/SLA">Service Level Agreement</a> <span class="footer_devider"> | </span> <a href="/partners">Partner Programs</a> <span class="footer_devider"> | </span><a href="/enterprise-contact-us">Enterprise Backups</a></div> </div></section> </div><div class="flex_column av_one_fifth avia-builder-el-9 el_after_av_three_fifth avia-builder-el-last "> <section class="av_textblock_section" itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_textblock ' itemprop="text" ><p><img src="http://magento.org.il/cloudally/wp-content/uploads/2014/08/powered.png" alt="powered by amazon web services" width="230" height="70" /></p> </div></section> </div> </div>
and this is how it looks like now:
http://magento.org.il/cloudally/?page_id=194as you can see i’ve almost succeed, but i have a border i can’t get rid of. so can you please help me solve this? is this a proper way of managing the un-even footer columns i’m trying to achieve?
any help will be appreciated,
thank you!
August 29, 2014 at 2:47 pm #310947Get rid of the top-border in the footer, put in your custom css:
#footer .container_wrap { border-top-width: none; }
September 1, 2014 at 11:59 am #311741Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
#footer #av_section_1 { border: none!important; }
Cheers!
YigitFebruary 5, 2015 at 4:37 pm #391424This reply has been marked as private.February 5, 2015 at 11:48 pm #391746Hi Soren!
It is aligned but the upper three images have some inner padding so you’d need to add that to the footer widgets too:
#footer .widget { padding: 0 16px; }
Cheers!
Josue -
AuthorPosts
- You must be logged in to reply to this topic.