I'm having problems with the Footer section code.
I'm using the Habits template which uses the Bootstrap templates & CSS.
If you look at the link here http://ahoydemo.ahoycaptain.com/acr_plb.html you'll see two footers. No I don't want two footers its just here as an example.
The first (or top) footer is custom code & CSS that I generated and is the way I want the footer to look. That code is in the Footer section of the Layout Settings and I added the CSS to the bootstrap-habits.css include.
The second footer is SS generated from the Navigation | Footer Page Links section. As you can see, the titles don't line up. I've even "padded" the link list lines "YYY" with dummy links just to see if the first two titles would line up if the number of links were the same. The titles still don't line up.
What am I missing here?
Footer Issues
-
- Posts: 889
- Joined: Fri Aug 11, 2006 1:35 pm
- Location: Orem, UT
- Contact:
Re: Footer Issues
Vince, in the bootstrap-ss.css file (or any css file used on all store pages) add float: left to the div.footer_pagelinks, then add a float:right to the fourth one so it is off to the other side of the footer.
To re-position the payment logos and the social media logos to be within the footer links section gets a little messy (in mobile and table) the way it currently is, but you could remove the div.clear in the footer so that it falls within the footer links area if there is room, then just add css to float the payment icons to the left and the social media icons to the right.
To re-position the payment logos and the social media logos to be within the footer links section gets a little messy (in mobile and table) the way it currently is, but you could remove the div.clear in the footer so that it falls within the footer links area if there is room, then just add css to float the payment icons to the left and the social media icons to the right.
Code: Select all
<style type="text/css">
div.footer_pagelinks {
float: left;
}
div.footer_pagelinks:nth-child(4) {
float: right;
}
div#footer > div.clear {
display: none !important;
}
div#footerline2 {
text-align: right !important;
}
div#footerline2 > div#paymentlogos {
float: left;
padding-left: 15px;
max-width: 25% !important;
}
div#footerline2 > div.smalldivide {
display: none !important
}
</style>
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
Contact me for help with any of your
custom ShopSite template questions.