Community Forums › Forums › Archived Forums › Design Tips and Tricks › Executive Pro Header-Footer Dimensions
Tagged: executive pro, footer, header
- This topic has 5 replies, 3 voices, and was last updated 11 years, 2 months ago by
BlakeN.
-
AuthorPosts
-
November 27, 2013 at 3:06 pm #75948
BlakeN
ParticipantHi,
For some reason the executive pro header and footer is slightly smaller in width than the rest of the page. I have tried reloading the original style sheet to see if it was something I altered but that was not the case.
It looks like both are off by about 1px but I would like to know how to get it to line up with the rest of the site.
What can be done to accomplish this?
Thank you,
http://directmktg101.com/
BlakeNovember 27, 2013 at 4:03 pm #75959cwalsh
MemberIt looks like it is the box shadow on .site-inner. Either remove them from the CSS or change the 1px to 0
.site-inner { -moz-box-shadow: 0 0 0 1px #fff; -webkit-box-shadow: 0 0 0 1px #fff; background-color: #fff; box-shadow: 0 0 0 1px #fff; clear: both; margin: 0 auto; overflow: hidden; }
Need website customization services or other help? Caley @ PixelPerfect Design Studio | Connect with me on Twitter: @pixelsperfect | Like me on Facebook: https://www.facebook.com/PixelPerfectDesignStudio
November 27, 2013 at 4:03 pm #75960nutsandbolts
MemberTry this... Hopefully it doesn't cause a domino effect that breaks something else.
Find this:
.site-inner { -moz-box-shadow: 0 0 0 1px #fff; -webkit-box-shadow: 0 0 0 1px #fff; background-color: #fff; box-shadow: 0 0 0 1px #fff; clear: both; margin: 0 auto; overflow: hidden; }
and change it to this:
.site-inner { background-color: #fff; clear: both; margin: 0 auto; overflow: hidden; }
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 27, 2013 at 6:28 pm #75980BlakeN
ParticipantI actually do not believe the mistake is occurring because of the box shadow. I tried removing the box shadow coding and the error was still apparent.
Here is what is currently implemented:
/* Site Containers
--------------------------------------------- */.site-container {
margin: 0 auto;
max-width: 1140px;
box-shadow: rgb(170, 170, 170) 0px 0px 15px;
}.executive-pro-landing .site-container {
max-width: 800px;
}.site-inner {
-moz-box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
background-color: #fff;
box-shadow: 0 0 0 1px #fff;
clear: both;
margin: 0 auto;
overflow: hidden;
}.executive-pro-home .site-inner {
overflow: visible;
}I went ahead and removed the shadowing (box-shadow: rgb(170, 170, 170) 0px 0px 15px;) so you can see where the header is still apparent.
Thanks for the help!
November 27, 2013 at 6:30 pm #75981nutsandbolts
MemberYou didn't take out all of it - there are 3 rules assigned to .site-inner for box shadow, two of which are still there. That's why I said to remove what was there and replace it with what I had above - was easier than explaining that there are 3 rules there. 🙂
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 27, 2013 at 8:59 pm #75991BlakeN
ParticipantIt looks like it is working out.
Thank you!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.