How do I add a responsive footer with 3 widgets?
-
Hi,
I have tried searching for tutorials to add a footer with 3 widgets to the Adelle theme and so far, it looks good on my laptop. Unfortunately, after testing it on mobile devices, the widgets on the footer were not responsive. How do I make them appear correctly on mobile devices?
Please help… thanks.
-
Hello,
Can you provide a link? I have checked the theme and everything is working as it should.
-
Hi there,
Thanks so much for your reply. Please find below a link to the blog:
http://myonlinebusinesspedia.com/If you scroll right down to the bottom, you’ll see that I have added 3 widgets to the footer, but unfortunately, they are positioned very oddly. I’m not sure how to correct it. :(
Here is the code I added to 3 files in my theme:
1) functions.php
————————
/* Add this code to functions.php file in your theme */register_sidebar(array(
‘name’ => ‘Footer Widget 1’,
‘id’ => ‘footer-1’,
‘description’ => ‘First footer widget area’,
‘before_widget’ => ‘<div id=”footer-widget1″>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));register_sidebar(array(
‘name’ => ‘Footer Widget 2’,
‘id’ => ‘footer-2’,
‘description’ => ‘Second footer widget area’,
‘before_widget’ => ‘<div id=”footer-widget2″>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));register_sidebar(array(
‘name’ => ‘Footer Widget 3’,
‘id’ => ‘footer-3’,
‘description’ => ‘Third footer widget area’,
‘before_widget’ => ‘<div id=”footer-widget3″>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));2) footer.php
——————-
<div id=”footer-widgets”><div id=”footer-widget1″>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer-1’) ) : ?>
<?php endif; ?>
</div><div id=”footer-widget2″>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer-2’) ) : ?>
<?php endif; ?>
</div><div id=”footer-widget3″>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer-3’) ) : ?>
<?php endif; ?>
</div></div>
3) style.css
—————
/* Footer Widgets */
/* Add this code to style.css file in your theme */#footer-widgets {
display: block;
width:100%;
margin-right:0;
background: #FFE1FF;
float: left;
}
#footer-widget1 {
width: 35%
float: left;
margin: 15px 10px 10px 30px;
padding: 10px;
background-color: #FFE1FF;
}
#footer-widget2 {
width: 30%;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #FFE1FF;
}
#footer-widget3 {
width: 35%;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #FFE1FF;
}Hope you could help… thanks so much in advance.
-
That blog is actually a wordpress.ORG blog, and this is the wordpress.COM support forum. For assistance, head over to http://wordpress.org/support since they’ll be able to help you on the different platform. You may need to create an account to post.
-
Hi,
I’m a bit confused… My blog’s domain is a .com domain; I would still need to go to http://wordpress.org/support to get support?
Thanks.
-
@elenichee
Go to the footer of this blog http://myonlinebusinesspedia.com/ and click the Powered by WordPress link.A danielisreading told you that is not a free hosted WordPress>COM blog and we do not provide support for it. You are posting to the wrong support forum. If you don’t have a username account at WordPress.ORG click http://wordpress.org/support/ and register one on the top right hand corner of the page that opens, so you can post to the support forums there and receive advice from WordPress.ORG bloggers.
-
-
- The topic ‘How do I add a responsive footer with 3 widgets?’ is closed to new replies.
WordPress.com Forums 