Remove big honking gap on mobile

How do I remove the big gap on mobile site?  See screen shot
http://screencast.com/t/qjEEUZ1t

The photo and text above it are really from the right column which now appears below the left coloumn in mobile site.

http://nsitedesigns.com/nsitedesigns/wrb/divorce.html
nsitedesignsAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
AdamConnect With a Mentor Senior DeveloperCommented:
I didn't notice until after I'd posted you've got some more style sheets (when I was looking at you other question about the header)

The site doesn't go to one column mode until it's down to 500px wide, not 768px

The line should go in css/screen_layout_small.css instead
0
 
AdamSenior DeveloperCommented:
screen_style.css has a style, .main.right on line 173
This class reads:
.main.right {background-color:#edeadd;margin-top:60px; margin-left:20px;}

Open in new window

The marginn-top:60px is what is causing the gap.

The gap only appears when the browser is shrunk down below 768px, and the responsive style in the
@media screen and (max-width: 768px) 

Open in new window

section start being used.

This section doesn't cause the problem, but it is where the fix should go.

Into this section, insert the following style:
.main.right {margin-top:15px;}

Open in new window

This will reduce this margin when the screen shrinks and the site goes to one column mode
0
 
nsitedesignsAuthor Commented:
I tried adding it but it didn't work.  Maybe I added it in the wrong place?  I tacked it on to the bottom of this section in the screen_styles.css page.

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
			border-bottom: 1px solid #FFF;
			width:200px;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("../img/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

.main.right {margin-top:15px;}

}

Open in new window

0
 
nsitedesignsAuthor Commented:
great - thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.