?
Solved

Remove big honking gap on mobile

Posted on 2013-11-27
4
Medium Priority
?
305 Views
Last Modified: 2013-11-30
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
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 12

Expert Comment

by:Adam
ID: 39681976
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
 

Author Comment

by:nsitedesigns
ID: 39682031
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
 
LVL 12

Accepted Solution

by:
Adam earned 2000 total points
ID: 39682149
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
 

Author Closing Comment

by:nsitedesigns
ID: 39687207
great - thanks!
0

Featured Post

Containers & Docker to Create a Powerful Team

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question