Docs

[Aaron]

Hi I have attached my footer design, how do i go about coding this into the theme and using css to position elements etc and also make it responsive? Thanks!

[Prasant Rai]

Hello Aaron,

Thanks for writing in!

Please walk-through following tutorials on adding menus and subscription box into widget area:

Adding Menus To Widget Areas

https://connect.mailchimp.com/how-to/52

Thanks.

[Aaron]

not helpful, i would like to create the above as shown in the screenshot? thank you

[Joao]

Hi Aaron.

X offers up to 4 widgets on the footer area. Your screenshot would require 5 areas.

You have 2 options. Reduce your design to 4 columns or use Cornerstone to create your footer instead of the real footer. that way you would be able to divide the footer in 5 columns, than save as a template block inside Cornerstone and place on the other pages, on the downside every time you update something you will need to update on every single page.

Let us know your thoughts and what we can help you with during the process.

Thanks

Joao

[Aaron]

This reply has been marked as private.

[Jade]

Hi Aaron,

As I have checked, the way you have setup the footer content into columns is not advisable since you positioned them through absolute positioning in CSS and the columns are actually stacked on top of each other and some links aren’t clickable because of that and this will have potential issues in mobile view.

What I can suggest you to do is wrap every column in that section in a div and add a class to the column divs and set the width of every div to around 20% of the container div and float them to the left. This should eliminate the large white space in the bottom part of that area.

The code should be something like:

.x-colophon.bottom .x-colophon-content .footer .one-fifth {
    width: 20%;
    float: left;
}

@media (max-width: 767px) {
    .x-colophon.bottom .x-colophon-content .footer .one-fifth {
        width: 100%;    
    }
}

The code above assumes that the class that contains every column is one-fifth .

Hope this will set you right on track.

[Aaron]

how do i implement one-fifth ? tried with no luck

[Jade]

Hi there,

You mentioned you hard coded the widget contents in the footer. Currently, you have something like:

<div class="support">
	<h1>Support</h1>
	<p class="contact">Contact Us</p>
	<p class="intergrations">Intergrations</p>
	<p class="help">Help Desk</p>
	<p class="demo">Request a Demo</p>
</div>

Try to update it to:

<div class="one-fifth">
    <div class="support">
	<h1>Support</h1>
	<p class="contact">Contact Us</p>
	<p class="intergrations">Intergrations</p>
	<p class="help">Help Desk</p>
	<p class="demo">Request a Demo</p>
    </div>
</div>

Do the same thing to the rest of the sections.

[Author]

Posts