Problem with footer

[BiggerThanLimits]

Hi,

I’m using child theme of Activello theme: https://colorlib.com/activello/

My website: http://www.biggerthanlimits.com

I added footer manually but there seem to be a problem with its responsiveness. It’s partly responsive but in mobile/tablets etc. view there’s additional width to the right and the footer is placed to the left (in some cases two parts are next to each other and the third part goes down).

Also, when I change the layout of the site or post it goes straight to the sidebar instead to stick to the bottom.

To add footer I used codes from here: https://www.tipsandtricks-hq.com/how-to-add-widgets-to-wordpress-themes-footer-1033

IS there any way to fix it and make it fully responsive? The rest of the site works well.

I would be REALLY grateful for help.

Hope you’re all having a good day.

Anna

[I.m.learning]

You have your footer placed outside the html and body tags. That fix will probably not fix all your errors. Maybe place your styles (which some appear repeated) inside the head tags.

I would have to review my code and yours, but you may not be accurately be linking bootstrap.

I used “view-source:” in my Chrome mobile browser to view your code, so it just be my view.

[Beverleyh]

IS there any way to fix it and make it fully responsive?

Quickly looking at the CSS in the tutorial you linked to, its all based on fixed width units (px).

Steps to make it responsive;

• convert to fluid units (e.g. %)
• make use of media queries to adjust layout at desired breakpoints

[BiggerThanLimits]

I’ve tried media queries but it didn’t really help. Those are my codes:

<?php
if(is_active_sidebar(‘footer-sidebar-1’)){
dynamic_sidebar(‘footer-sidebar-1’);
}
?>

<?php
if(is_active_sidebar(‘footer-sidebar-2’)){
dynamic_sidebar(‘footer-sidebar-2’);
}
?>

<?php
if(is_active_sidebar(‘footer-sidebar-3’)){
dynamic_sidebar(‘footer-sidebar-3’);
}
?>

</footer> <!– #colophon –>

<!– #page –>

<?php wp_footer(); ?>

</body>
</html>

div class= “my-copyright”>COPYRIGHT © 2016 BIGGER THAN LIMITS – ALL RIGHTS RESERVED div>

and CSS:

#footer-sidebar {
border-top: 1px solid #dedede;
margin-top: 90px;
display:table;
height: 250px;
padding: 10px 0 10px 0;

}

#footer-sidebar1 {
float: left;
width: 340px;
margin-left:5px;
margin-right:5px;

}

#footer-sidebar2 {
float: left;
width: 340px;
margin-left:5px;
margin-right:5px;
}

#footer-sidebar3 {
float: left;
width: 340px;
margin-left: 5px;
margin-right:5px;
}

.my-copyright {
width: 100%
float: bottom;
font-size: 70%;
text-align: center;
margin-right: 3%;
margin-bottom: 10px;
}

[Beverleyh]

Sorry, I’m not familiar with WordPress. But again, focusing on the CSS only, the width properties in the code provided have fixed/absolute pixel units (px). Changing them to fluid/relative units, such as percentages, will help to create a flexible and responsive layout.

[BiggerThanLimits]

I’ve tried that but then in mobile view three footer sidebars appear next to each other and are really small you can’t actually see what’s in there.

I’ll try some more. Thank you for your reply :)

[Beverleyh]

I’ve tried that but then in mobile view three footer sidebars appear next to each other and are really small you can’t actually see what’s in there.

Yes, and at that stage you’d use a media query to change the layout properties further, maybe by removing the floats and increasing the panel widths to 100% so that they sit vertically on top of each other.

[I.m.learning]

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.biggerthanlimits.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Is CSS issues.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.biggerthanlimits.com%2F

is for HTML

[roykfahey]

I too suffering from this same problem

[Author]

Posts