Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 315
  • Last Modified:

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
0
nsitedesigns
Asked:
nsitedesigns
  • 2
  • 2
1 Solution
 
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
 
AdamSenior 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
 
nsitedesignsAuthor Commented:
great - thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now