Solved

Remove big honking gap on mobile

Posted on 2013-11-27
4
289 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
  • 2
  • 2
4 Comments
 
LVL 12

Expert Comment

by:Cyber-spy
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:
Cyber-spy earned 500 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This video teaches users how to migrate an existing Wordpress website to a new domain.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

803 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