Mobile site squished to one side, caused by header/footer image

Won’t let me add a link. Here’s the url
animcareerpro.com

I’m using a custom footer and an image for the header. I think they need to be responsive so that they scale with the rest of the site…but how? I’m assuming I need to have some css? Please advise.

Hi there,

Thanks for writing in,

If you wish to achieve that, you can try following code under Appearance > Theme Options > Custom CSS:

#wrapper {
  margin: 0 auto 0px auto !important;
}

.footer img {
  width: 100%;
  min-height: 60px !important;
}

.custom-header {
  background-size: 100% 100% !important;
}

Thanks.

My Footer is still messed up. It’s the full width on the homepage, and fits the content area on all other pages.

animcareerpro.com

Hi,

I am not seeing the footer image anymore.
Please kindly update this thread if you still require help.

Thanks!

Thanks for your reply, you can see a white bar at the very bottom of the home page, that’s the spot where the footer is supposed to go. It’s spans the entire horizontal length of the browser. On the other pages it fits the 1200px content area.

I’ll place the footer image back in there so you can see it better. Also, these are the changes I currently have in the “custom css” section.

.entry-content h1 {
font-size: 40px !important;
}

.entry-content h2 {
font-size: 40px !important;
}

/* this is the “register” link */
#menu-item-536 a span {
margin-left:0px
}

/* this is the “login” link */
#menu-item-541 a span {
margin-left:0px
}

/* this is the “Go to Class” link */
#menu-item-417 a span {
color:green !important;
font-weight:900;
}

/* this is the “tuition” link */
#menu-item-621 a span {
padding-right:130px
}

.post-more {
visibility:hidden
}

#wrapper {
margin: 0 auto 0px auto !important;
}

.footer img {
width: 100%;
height:100%;
}

.sc_menu li {
margin-top:8px;
}

.entry-content img{
padding:0px;
!important;
}

p, pre, ul, ol, dl, dd, blockquote, address, table, fieldset, form, .gallery-row, .comment-list ul, .comment-list ol{
margin-bottom:10px;
!important;
}

.content-bottom{
border-top:0px
}

OK, I forced it to maintain it’s size and position by doing this…

.footer{
width:1200px;
height:125px;
margin:auto;
{

But now I have this crazy white line that won’t go away right above the footer. I inspected, and it’s called div.content-bottom and it’s 1903×1;border-top: 1px solid #FFF; and the website is now not mobile responsive at all, probably because this 1903x1px line across the top of the footer.

I added this code below which should fix the issue (the line goes away when inspecting, and clicking off the border-top:0px item.)But when I add this in custom css in my theme it does nothing.

.content-bottom{
border-top:0px
}

Hi,

Try adding the !important rule.

.content-bottom {
    border-top: 0 none !important;
}

Works for me in my firebug console.

Thanks!

I added that to the custom css, but it’s not working. Driving me nuts, that should work. I inspected it in firefox and explorer – when I check off the border-top it gets rid of it. But this isn’t doing anything when I use it in the custom css

Wow, I just put this in but moved it to the top of the “custom css” field (top of the list) and it is fixed. So it matters what order it’s in? I guess it does. fixed!!

.content-bottom {
border-top: 0px;
!important;
}