Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS Help Needed: Footer Is Way Too Wide On Home Page
- This topic has 7 replies, 2 voices, and was last updated 9 years, 11 months ago by anotherusername.
-
AuthorPosts
-
May 4, 2014 at 9:13 pm #103639anotherusernameParticipant
The footer is way too wide on my home page:
http://www.marinhomephotography.com/
I am pretty sure that the fault is with some DIV or other CSS that I added to the home page because:
1) If you go to a different page (such as http://www.marinhomephotography.com/gallery/ ) the footer is fine.
2) I have gone through and disabled all plugins, and the problem remained, so it is probably not a plugin problem.
I suspect it might be with a div that I added, such as:
home_page_text
Or possibly it is because I changed the width of :
.content-sidebar #content,
.sidebar-content #content {from width: 590px
to: width: 630px;
(Although I don't think the sidebar is supposed to appear on the home page?!?!?!)
Thanks in advance.
P.S. I am aware that I am using the Genesis Simple Footer. I deactivated it and used the default Genesis footer and it still had the same problem.
http://www.marinhomephotography.com/May 5, 2014 at 8:52 am #103696anotherusernameParticipantI thought it was due to the #inner width being 100% but it doesn't seem to affect it on other pages.
I am really stuck here. CSS hates me.
May 5, 2014 at 9:10 am #103700Lauren @ OnceCoupledMemberIt's because you moved your footer outside of the wrap. You'll need to apply the styles of
#wrap
to#footer
in order for it to appear properly. You also have an empty#inner
which is creating the top border of your footer. Remove thebox-shadow
from that property (using.home #inner { box-shadow: none; }
) and your footer will look better.Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 5, 2014 at 2:09 pm #103739anotherusernameParticipantHi there, Lauren:
first, thanks so much for taking the time to respond.
You mentioned one thing that I might have misunderstood. you said:
"It’s because you moved your footer outside of the wrap."
I am concerned because I never actually edited the template in any way. I just edited the CSS file.
Is that what you are saying? That the CSS files was edited incorrectly?
Or are you saying that somehow the homepage TEMPLATE (the .php page) was edited and the DIVs were rearranged?
~~~~~
Either way, I guess I could just apply the #wrap styles to the #footer div.
Another thing that is confusing to me is the empty #inner div. Don't know why it would be that way. Again, I haven't edited any .php pages. Just CSS.
And I did deactivate ALL plugins and tested it out, so I am baffled by this.
Thanks again.
May 5, 2014 at 2:12 pm #103742anotherusernameParticipantWait, do you mean I changed the CSS of my #footer so it is no longer "inheriting" (whatever the heck that means) the styling of the #wrap DIV?
That would make sense.
May 5, 2014 at 2:40 pm #103748anotherusernameParticipantThank You, Lauren:
It turns out that in a text widget I had on the home page, I had included text with a closing DIV tag in it. I didn't have that text on any other page (just the home page).
It's those darn extra closing DIV tags that will get you every time.
May 5, 2014 at 2:51 pm #103751Lauren @ OnceCoupledMemberhaha, glad you solved it at least! 🙂
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 5, 2014 at 4:24 pm #103765anotherusernameParticipantYes, very relieved. thanks! 🙂
-
AuthorPosts
- The topic ‘CSS Help Needed: Footer Is Way Too Wide On Home Page’ is closed to new replies.