Solved

Remove big honking gap on mobile

Posted on 2013-11-27
4
282 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
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…
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).

920 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now