Community Forums › Forums › Archived Forums › Design Tips and Tricks › Mimimum Pro need CSS help
- This topic has 9 replies, 3 voices, and was last updated 9 years, 4 months ago by Mana193.
-
AuthorPosts
-
December 8, 2014 at 5:16 pm #134028rjfreitasMember
Ok, I am stumped, can't figure this one out....
Two questions:
1)
I am trying to remove the thin white line between the home page image and the purple footer area.
See here:
http://www.ek-energy.net/2)
I set the top margin to zero for site-tagline to get rid of the other white space between the home page picture and purple area. After I did that the top of my images on other pages got cut off. For example here:
http://www.ek-energy.net/operations/Do you know how I can tweak that to move the top of the image down?
Thanks!
http://www.ek-energy.net/December 8, 2014 at 7:23 pm #134036anotherusernameParticipantFor #2, off the top of my head, I think that you want to revert your .site-inner back to the way it was, and then create a new set of rules for
.home .site-inner {
margin:0;
}Try that and see how ti goes.
It's monday afternoon so I can't think now.
December 9, 2014 at 7:40 am #134073rjfreitasMemberThanks! That worked! Any ideas on #1?
I still have a little white between the home page image and the purple footer.
December 9, 2014 at 2:26 pm #134108anotherusernameParticipant#1 has me stumped, too... Looked at it for about 10 minutes and didn't figure it out.
If it were me, I would look through your style sheet and I would comment out any of the instances where you see:
content: " ";
so I would change them to:
/* content: " "; */
And see if that fixes anything.
If that doesn't work, I am not sure what else to do.
December 10, 2014 at 7:42 am #134157rjfreitasMemberThere were only two, I tried commenting them out, but no luck.
Anyone else have any ideas?
Thanks!
December 10, 2014 at 9:44 am #134196anotherusernameParticipantWell, I found a workaround...
Go to your .site-footer, which currently looks like this:
.site-footer { background-color: #643C90; letter-spacing: 1px; padding: 30px 10px; text-align: center; }
And add margin-top: -10px; to it, so that the whole things looks like this:
.site-footer { margin-top: -10px; background-color: #643C90; letter-spacing: 1px; padding: 30px 10px; }
You will probably want to fiddle around with the exact distance and look at the effect on different browsers.
Note that this works at DESKTOP widths.
Once you start getting into your media query widths, your .site-inner starts pushing things down.
I wouldn't be too surprised if the .site-inner is causing your problems in the first place. You may have to modify that div at various media query sizes.
No guarantee that this solution will work on ALL browsers at all widths, but at least it is a start.
Hope this helps.
December 10, 2014 at 8:16 pm #134246rjfreitasMemberGreat, thanks again! I will play around with it.
December 11, 2014 at 10:56 am #134280anotherusernameParticipantOne other thing...
That main image on the home page, while beautiful, takes an awful long time to download...
I mean, it is over 3 megs!!! Maybe you can slim it down somehow???
December 13, 2014 at 8:32 am #134461rjfreitasMemberYeah, I am going to convert it to jpeg. Hopefully the quality won't go down much....
December 15, 2014 at 8:34 am #134571Mana193MemberThe answer to #1, is that two things are creating that gap - the .site-tagline (that you are not using) and the header image.
That footer margin will work though or if you want the bottom of the header to touch the top of the footer, you could try something like this:/* fix tagline gap */ .site-tagline { display: inline; /* or */ display: none; } /* fix header gap - make your header image a display:block*/ custom-bg { display: block; }
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.