- This topic is empty.
-
AuthorPosts
-
August 1, 2016 at 5:21 am #244089
belfastrab
ParticipantHi
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” /><!-- javascripts --> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<section id="grid" class="clearfix"> <div> <div> <div> <div> <h3>123 Station Road, Newtownabbey, BT37 0BU</h3> </div><!--end of topaddress--> <div> <h3>028 90 123456</h3> </div><!--end of topphone--> </div><!--end of topbar--> </div><!--end of first row--> <div> <div> <h2>Logo & Nav</h2> </div><!--end of header--> </div><!--end of second row--> <div> <div> <h1>Slider place holder</h1> </div><!--end of header--> </div><!--end of third row--> <div> <div> <img src="img/icon1.jpg" alt="Feature1" /> <h4>Feature 1 Title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dolorem, est iure magni laboriosam.</p> </div><!--end of feature1--> <div> <img src="img/icon2.jpg" alt="Feature1" /> <h4>Feature 2 Title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dolorem, est iure magni laboriosam.</p> </div><!--end of feature2--> <div> <img src="img/icon3.jpg" alt="Feature1" /> <h4>Feature 3 Title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dolorem, est iure magni laboriosam.</p> </div><!--end of feature3--> </div><!--end of forth row--> </div><!--end of show-grid --> </section>
</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 {
/
Themax-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 #244093Beverleyh
ParticipantIf 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, but
padding-bottom:50px !important;
is still in effect. Focus you attentions there and adjust as required.August 1, 2016 at 10:43 am #244125belfastrab
ParticipantThank 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.