nicolesage

Am I totally off by doing something like this (it fixed the overlapping problem on the cell phone but then on the computer the footer was back up in the middle of the screen:

body.home footer @media screen and (min-width: 770px) {
position: absolute;
bottom: 0px;
width: 100%;
}

I originally had just this (which worked for moving footer down on computer but caused it to overlap on cell phone):

body.home footer {
position: absolute;
bottom: 0px;
width: 100%;
}

So I played with the below adding in just the ‘padding-top’ but it changes the padding on the view on the computer, not on the cell phone screen.

/* 12.1 Minimum width of 770 pixels */
@media screen and (min-width: 770px) {
/* Three footer widget areas */
#footer-widgets {
width: 100%;
border-top: none;
padding-top: 20%;
}
#footer-widgets.three #footer-widget-left {
float: left;
width: 30%;
padding-right: 2.3%;
padding-top: 20%;
}
#footer-widgets.three #footer-widget-middle {
float: left;
width: 30%;
padding-left: 2.5%;
padding-right: 2.3%;
padding-top: 20%;
}
#footer-widgets.three #footer-widget-right {
float: right;
width: 30%;
padding-left: 2.5%;
padding-top: 20%;

Am I at least in the right direction to adjust the footer on cell phone screens? Need it moved down slightly so it does not overlap the menu.

thank you!

I am using a child’s theme and refer to the theme’s style sheet for help.

In changing the rule to the 770px media screen, would it be adding a padding to the top? or do I need to target the footer for this? Any tips on what direction to go would be greatly appreciated. Basically just on the home page of cell phone view I need to move the footer down so it does not overlap the menu.

Thank you for all your help this afternoon!

So that works but it applies it to every single page. I was trying to make it work with just the home page since all the other pages have content so by making the footer absolute it overlaps with content on those other pages.

maybe something with bogy.home footer instead of footer#colophon?

That might not make sense, I’m still learning by experimenting.

Thank you, I appreciate you experimenting! I’ve been trying several ways also with sticky footers and positioning in the css but nothing seems to be moving it.

I see what you mean about the image extending, I could make it smaller. right now the images is 1060 x 826 but the plugin I used to make it full screen is supposed to make it responsive so the image shouldn’t be extending. I will have to play with that a bit.

Great, thank you!

Website is here

Would it work to move it down using something like the about code that removed it but instead of ‘display: none’ it moves it to the bottom or the screen?