Hi
My website is complete and the mobile side of it is 99% done to. Im just having one problem that has appeared out of now where with it. If you view the website from your mobile http://www.fancypantscustomcakes.com.au you will see a massive section of padding. I Cannot figure out how to remove this. I have looked at all the padding in the Mobile section of CSS but cant figure it out. Here is the Coding
/* Mobile Navigation */
/* Reset */
#mainnav, #mainnav-menu, #mainnav-menu li, #mainnav-menu a, #mainnav-menu ul,
#mainnav-menu ul a, #mainnav-menu ul ul, #mainnav-menu li ul ul
{
margin: 0;
padding: 0;
position: static;
float: none;
display: inline;
font-size: 1.0em;
border: none;
box-shadow: none;
background: none;
top: 0;
left: 0;
}
#mainnav-menu li:hover ul ul, #mainnav-menu li:hover ul ul ul, #mainnav-menu li:hover ul ul ul ul,
#mainnav-menu li:hover ul, #mainnav-menu li li:hover ul, #mainnav-menu li li li:hover ul, #mainnav-menu li li li li:hover ul
{
display: inline;
}
#mainnav {
margin: 2em 0;
float: none;
background: yellow;
padding: 1em 0;
}
#mainnav-icon {
display: block;
padding: 1.5em;
text-decoration: none;
font-size: 1.1em;
font-weight: bold;
color: #333;
}
#mainnav-icon:hover {
cursor: pointer;
color: #00bc45;
}
#mainnav-icon:after {
float: right;
content: "";
width: 32px;
height: 30px;
background: url(images/menu-icon.png) no-repeat 50%;
margin: -0.3em 0 0 0;
}
#mainnav-menu {
width: 100%;
display: none;
border-top: 1px solid #ddd;
}
#mainnav-menu a {
display: block;
padding: 1.3em 1.5em;
text-decoration: none;
font-size: 1.0em;
font-weight: bold;
color: #fff;
background: #48a4f9;
border-bottom: 1px solid #ddd;
clear: left;
}
#mainnav-menu a:link, #mainnav-menu a:visited{
color: #333;
text-decoration: none;
}
#mainnav-menu a:hover{
border-top: none;
color: #fff;
}
#mainnav-menu ul {
float: left;
width: 100%;
padding: 1em;
background: #e5e5e5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#mainnav-menu ul a {
display: block;
width: 100%;
padding: 1em;
color: #666;
font-size: 0.9em;
border-bottom: 1px solid #f5f5f5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#mainnav-menu ul a:link, #mainnav-menu ul a:visited {
color: #666;
}
#mainnav-menu ul a:hover {
text-decoration: underline;
background: none;
}
#mainnav-menu ul li ul {
float: left;
padding: 0 0 0 1em;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#mainnav-menu li.current_page_item a, #mainnav-menu li.current-menu-item a {
border-top: none;
border-left: 2px solid #fff;
}
#mainnav-menu li.current_page_item ul li a, #mainnav-menu li.current-menu-item ul li a{
text-decoration: none;
}
#mainnav-menu ul li.current_page_item a, #mainnav-menu ul li.current-menu-item a {
text-decoration: underline;
}
/* Frontpage Template */
#frontpage-intro .frontpage-intro-text {
font-size: 1.4em;
text-align: center;
}
#frontpage-widgets-one {
margin: 0;
}
.frontpage-widgets .widget-col-third {
float: none;
width: 100%;
padding-right: 0;
}
}
/* Tablets (portrait) | <800px */
@media only screen and (max-width: 50em) {
}
.header-image img {
min-height: 120px;
height: auto;
}
#header-line {
margin-top: 1em;
max-width: 50%;
}
#frontpage-intro .frontpage-intro-text {
font-size: 1.3em;
}
#footer-widgets {
margin-right: 2em;
}
.entry h1, .comment h1 {
font-size: 2.2em;
}
.entry h2, .comment h2 {
font-size: 1.8em;
}
.entry h3, .comment h3 {
font-size: 1.4em;
}
.entry tr th,
.entry thead th {
padding: 0.2em 0.4em;
}
.entry tr td {
padding: 0.2em 0.4em;
}
}
/* Phablets (portrait) | <640px */
@media only screen and (max-width: 40em) {
#logo {
float: none;
}
#header-line {
float: none;
border-top: 1px solid #ddd;
margin-top: 0;
max-width: 100%;
}
.page-title {
font-size: 1.8em;
}
.post-title {
font-size: 1.6em;
}
}
/* Smartphones | <480px */
@media only screen and (max-width: 30em) {
}
#mainnav-icon {
padding: 1.2em 1.5em;
}
#wrap {
margin-top: top;
}
#wrap, #footer {
padding-left: 1.3em;
padding-right: 1.3em;
}
.widget, .type-post, .type-page, .type-attachment,
.archive-title, .post-pagination, .wp-pagenavi,
#comments, #frontpage-intro {
margin-bottom: 1.4em;
}
.header-image img {
min-height: 80px;
height: auto;
}
.alignright, .alignleft {
float: none;
margin: 1em 0;
}
.page-title {
font-size: 1.6em;
}
.post-title {
font-size: 1.4em;
}
.entry h1, .comment h1 {
font-size: 1.8em;
}
.entry h2, .comment h2 {
font-size: 1.6em;
}
.entry h3, .comment h3 {
font-size: 1.3em;
}
}
/* Smartphones | <320px */
@media only screen and (max-width: 20em) {
.header-image img {
min-height: 75px;
height: auto;
}
.postmeta span, .postinfo span {
display: block;
}
.postmeta .sep, .postinfo .sep, .postmeta .post-edit-link {
border: none;
margin: 0;
padding: 0;
}
.page-title {
font-size: 1.2em;
}
.post-title {
font-size: 1.1em;
}
.entry h1, .comment h1 {
font-size: 1.5em;
}
.entry h2, .comment h2 {
font-size: 1.3em;
}
.entry h3, .comment h3 {
font-size: 1.2em;
}
}