Removing Margin / Padding in a Media Query - CSS-Tricks

This topic is empty.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
August 1, 2016 at 5:21 am #244089
belfastrab
Participant
Hi

I have limited but functional knowledge of html and css and at the moment I am trying to teach myself RWD with the current test project using Foldy (a rwd grid system)

I had been getting on ok but for the life of me I cannot work out how to remove or reduce the spacing which is either margin or padding between two divs (classes topbar and header once the screen size goes below 480px.

I am using a media query in style.css for 480px and it is working as I have ran a few simple tests such as background colour change etc and all is working fine however I cannot figure out how to remove the space between the topbar and the header. I have tried both setting the bottom padding and padding margin on topbar to 0 (all round) and the same with header but top margin and padding to 0 I have tried setting it to none I have also tried adding !important but still the space remains.

A live example of this issue is here: http://www.freewoodworkplan.com/foldy_test/

Any and all help very much appericiated. I have tried for hours to work this out and Googled till I am blue in the face but no joy.

Thanks

Rab

HTML

<script><!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>Foldy Test</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
<!– stylesheets –>
<link rel=”stylesheet” href=”css/grid.css” type=”text/css” />
<link rel=”stylesheet” href=”css/style.css” type=”text/css” />
```
&lt;!-- javascripts --&gt;
&lt;!--[if IE]&gt;&lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
```
</head>

<body>
```
&lt;section id="grid" class="clearfix"&gt;

<div>

    <div>
        <div>

            <div>
                &lt;h3&gt;123 Station Road, Newtownabbey, BT37 0BU&lt;/h3&gt;
            </div>&lt;!--end of topaddress--&gt;

            <div>
                &lt;h3&gt;028 90 123456&lt;/h3&gt;
            </div>&lt;!--end of topphone--&gt;
        </div>&lt;!--end of topbar--&gt;
    </div>&lt;!--end of first row--&gt;

    <div>
        <div>
            &lt;h2&gt;Logo &amp; Nav&lt;/h2&gt;
        </div>&lt;!--end of header--&gt;
    </div>&lt;!--end of second row--&gt;

    <div>
        <div>
            &lt;h1&gt;Slider place holder&lt;/h1&gt;
        </div>&lt;!--end of header--&gt;
    </div>&lt;!--end of third row--&gt;

    <div>

        <div>
            <img src="img/icon1.jpg" alt="Feature1" />
            &lt;h4&gt;Feature 1 Title&lt;/h4&gt;
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dolorem, est iure magni laboriosam.</p>
        </div>&lt;!--end of feature1--&gt;

        <div>
            <img src="img/icon2.jpg" alt="Feature1" />
            &lt;h4&gt;Feature 2 Title&lt;/h4&gt;
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dolorem, est iure magni laboriosam.</p>
        </div>&lt;!--end of feature2--&gt;

        <div>
            <img src="img/icon3.jpg" alt="Feature1" />
            &lt;h4&gt;Feature 3 Title&lt;/h4&gt;
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dolorem, est iure magni laboriosam.</p>
        </div>&lt;!--end of feature3--&gt;

    </div>&lt;!--end of forth row--&gt;

</div>&lt;!--end of show-grid --&gt;

&lt;/section&gt;    
```
</body>
</html></script>

CSS (Style):

<script>
.topbar {
background-color: #414141 !important;
height: 25px;
margin-top: -10px;
}

.topbar h3 {
font-family: arial;
color: #ffffff;
padding: 5px;
margin: -8px;
font-size: 10px;
}

.topaddress {
float: left;
}

.topphone {
float: right;
padding-bottom: 50px !important;
}

.header {
margin-top: -20px;
}

@media screen and (max-width: 480px) {

.topbar {
clear: all;
height: 40px;
margin-bottom: none;
margin-top: 0 !important;
margin-bottom: none !important;
}

.topaddress {
float: left;
}

.topphone {
float: left;
padding-top: 5px;
}

.header {
margin-top: none !important;
padding-top: none !important;
}

}</script>

CSS (grid):

<script>
/*————————————————————
```
Style.css

Created by: Dave Rupert
Contact:        http://github.com/davatron5000/foldy960

Copyright 2012
License:      WTFPL + "Not going to maintain this because
          the rent is too damn high licence."
```
————————————————————–*/

/* Responsive Resets
————————————————————– */
@-o-viewport {
width: device-width;
}
@-ms-viewport {
width: device-width;
}
@viewport {
width: device-width;
}

html {
overflow-y: auto;
}

img,
audio,
video,
canvas {
max-width: 100%;
}

/* Grid > 6 Column Mobile First
————————————————————– /
.container {
/
The max-width property is the width governer. I dare you to experiment
with setting this larger, something like 1280px.
*/
max-width: 1280px;
width:92%;
margin:0px auto;
position: relative;
}

.row {
clear: both;
}

@media screen and (min-width: 480px) {
.container {
width: 98%;
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-half,
.grid-full,
.grid-unit {
float: left;
width:96.969696969697%;
margin:0 1.515151515152% 1em;
}

.gallery .grid-unit,
.grid-half {
width:46.969696969697%;
margin: 0 1.515151515152% 1em;
}

.grid-flow-opposite{
float:right
}

}

@media screen and (min-width: 640px) {
.grid-1 { width: 13.636363636364%; }
.grid-2 { width: 30.30303030303%; }
.grid-3,
.grid-half { width: 46.969696969697%; }
.grid-4 { width: 63.636363636364%; }
.grid-5 { width: 80.30303030303%; }
.grid-6,
.grid-full { width: 96.969696969697%; }

.gallery .grid-unit {
width: 30.30303030303%;
}

.content-pad-right {
padding-right: 4%; /* Use (or don’t) as necessary. */
}

.content-pad-left {
padding-left: 4%;
}

}

/* Micro Clearfix – http://nicolasgallagher.com/micro-clearfix-hack/
For best results, use your favorite clearfix here.
————————————————————– /
.cf:before, .cf:after { content:””; display:table; }
.cf:after { clear:both; }
.cf { zoom:1; } / For IE 6/7 (trigger hasLayout) */

/* Layout
————————————————————– */
body {
font: 100%/1.5 sans-serif;
}

section {
margin-bottom: 2em;
}

footer {
font-size: 0.9em;
border-top: 1px solid #ccc;
padding: 0.5em 0 2.5em;
}

/* Typography
————————————————————– */
.heading {
font-size: 3em;
margin: 0;
}

.sub-heading {
font-size: 2em;
margin-bottom: 0.5em;
}

a {
color: #0066cc;
}

a:focus,
a:hover {
color: #003399;
}

/* Elements
————————————————————– */
figure {
margin: 0;
background: #f8f8f8;
}

figcaption {
padding: 0.5em 1em 1em;
font-size: 0.875em;
}

code {
padding: 0.5em;
background: #red;
}

/* Helpers
————————————————————– /
.show-grid div[class=’grid-‘] {
background-color: #eee;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
padding: 0.5em 1em;
margin-bottom: 1em;
text-align: center;
}</script>
August 1, 2016 at 5:53 am #244093

Beverleyh
Participant

If you use the Developer Toolbar (F12 in most browsers), you can hover over elements to see which is the one creating the problem. In this case, it looks like .topphone, which is currently floated right with a padding-bottom of 50px (in ‘styles.css’). Bear in mind that there is an !important declaration against it that you should probably remove.

It the 480px media query, the float moves left and there is an additional padding-top of 5px, butpadding-bottom:50px !important; is still in effect. Focus you attentions there and adjust as required.

August 1, 2016 at 10:43 am #244125

belfastrab
Participant

Thank you Beverley you are a star with the face of an angel (sorry can’t help it I literally am Irish) that has done the trick and I can’t believe how stupid I have been for not seeing that.

Thanks again
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

The forum ‘CSS’ is closed to new topics and replies.