Responsive Web Design And Negative Margins

Negative margins are low hanging when it comes to debugging your responsive web design. At a smaller screen, negatives margin can cause elements to partially move off the screen.

Negative margins certainly have their place but this is usually at the desktop screen level. They are often used for creating overlap. For example, you might have a price image that you want to overlap part of your main header image. Using a negative margin can create this effect.

The snippet below is an example of how negative margins create overlap.


[code language=”css”]
<style>
.border {
border:1px solid;
width:200px;
}
</style>

<div id="div1" class="border">This is the left div</div>
<div id="div2" class="border" style="float:left;margin:-10px;">
This is the right div</div>
[/code]

When it comes to responsive web design, turning off or replacing negative margins can help get things back into order quickly. To do this, create a class for the negative margin. One definition will be outside of any media queries and another will be inside.

Below is an update to the above code showing how a new class removes the negative margin at a lower screen width.


[code language=”html”]
<style>
.border {
border:1px solid;
width:200px;
}
.negmargin {margin:-10px;}

@media screen and (max-width:550px) {
.negmargin {margin:0px;}
}
</style>

<div id="div1" class="border">This is the left div</div>
<div id="div2" class="border negmargin" style="float:left;">
This is the right div</div>
[/code]

Negative margins certainly have their place in providing interesting visual effects. But at lower screen widths, you might want to consider replacing them with 0 margin.


Not Sure How To Fit A Responsive Web Design Onto Your Existing Website?

Worried About How Long It Will Take To Find All The Needed Knowledge and Put It Altogether?

You No Longer Have To Worry.

Practical Responsive Web Design is an all in one course that will show you how to fit a responsive web design onto your existing website without sacrificing hours upon hours learning and running down dead ends.

Guru status not required. You'll see step by step how do your website, new or existing, up and running with a responsive web design.

How do you get started? Just click here and let's begin.

Opt In Image
Are you still struggling to validate your info product idea?

Solve that problem now by signing up below to get the entrepreneurs guide to info product marketing free!