Css Tweaks to remove margins
-
-
- Graeme Wingate
- Newbie
- Posts: 9
- Thanks: 0
-
Hi Guys,
I'm struggling with a bit of custom css, I'm like a chimp banging in numbers at the moment to make things change size and not quite getting there.
Anyway, I'm trying to reduce margins to maybe 1 or 2px's between modules and the mainbody on my modulus template. I am adding this to template.css but can't quite get them to match up. It is for a 3-6-3 set up....
#rt-main .rt-grid-3 {
width:200px;
margin-left: 10px;
margin-right: 10px;
}
#rt-main .rt-grid-6 {
width:510px;
margin-left: 10px;
margin-right: 10px;
}
#rt-main .rt-grid-3 {
width:200px;
margin-left: 10px;
margin-right: 10px;
Firstly does anyone see anything obvious that I am missing and secondly is there any good help files or tutorials you could point to so I could tweak these things for myself in future...
Cheers
GW
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
looks like you want to change the widths of the grids?
as you can see there is already a margin-left: 10px;margin-right: 10px;
in the core (see below) wich make the gutter ...
So I dont really get what your code is about.
200 + 200 + 510 makes 910 px
but there is only room for 900px = 220 + 220 + 460
so it should be 200 + 200 + 500 ...
also be aware of specifity.
div#rt-main div.rt-grid-6 {...} should be better.
Tho its not directly on this topic this may help:
www.rockettheme.com/forum/index.php?f=30...01342&rb_v=viewtopic
btw these are the core grid widths from grid-12.css ...
.rt-grid-1, .rt-grid-2, .rt-grid-3, .rt-grid-4, .rt-grid-5, .rt-grid-6, .rt-grid-7, .rt-grid-8, .rt-grid-9, .rt-grid-10, .rt-grid-11, .rt-grid-12 {display: inline;float: left;position: relative;margin-left: 10px;margin-right: 10px;}
.rt-container .rt-grid-1 {width: 60px;}
.rt-container .rt-grid-2 {width: 140px;}
.rt-container .rt-grid-3 {width: 220px;}
.rt-container .rt-grid-4 {width: 300px;}
.rt-container .rt-grid-5 {width: 380px;}
.rt-container .rt-grid-6 {width: 460px;}
.rt-container .rt-grid-7 {width: 540px;}
.rt-container .rt-grid-8 {width: 620px;}
.rt-container .rt-grid-9 {width: 700px;}
.rt-container .rt-grid-10 {width: 780px;}
.rt-container .rt-grid-11 {width: 860px;}
.rt-container .rt-grid-12 {width: 940px;}
to change the gutter I suggest to add something like
.rt-grid-1 > div.rt-block,
.rt-grid-2 > div.rt-block,
.rt-grid-3 > div.rt-block,
.rt-grid-4 > div.rt-block,
.rt-grid-5 > div.rt-block,
.rt-grid-6 > div.rt-block,
.rt-grid-7 > div.rt-block,
.rt-grid-8 > div.rt-block,
.rt-grid-9 > div.rt-block,
.rt-grid-10 > div.rt-block,
.rt-grid-11 > div.rt-block,
.rt-grid-12 > div.rt-block,
#rt-sidebar-a > div.rt-block,
#rt-sidebar-b > div.rt-block,
#rt-sidebar-c > div.rt-block {
margin-left: -8px;
margin-right: -8px;
background: red;
}
(this is for basic-gantry, the red is just to make gutter visible)
-
Time to create page: 0.080 seconds