Trying to remove an unsightly gap - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

Author

Posts
November 15, 2012 at 8:42 am #40819

vikingcourt
Member

[A site i’m developing](http://gamepleb.com “A site i’m developing”)

Hi :)

I’m trying to remove the gap from below the character logo in the header (It’s about 15px tall)
When i try to correct the margins in that container, the whole site shifts and the gap appears at the bottom instead….

Any tips appreciated.

Thanks

November 15, 2012 at 9:01 am #114416

Watson90
Member

Hi @vikingcourt try this;

.rt-block {
padding: 0px 15px;
}

Padding was being added to the top and bottom of the image, if you want to JUST remove the bottom gap then just edit the code to say;

.rt-block {
padding: 15px 15px 0 15px;
}

Once you add that, the part at the bottom will disappear, just added this in your footer section;

.bodylevel-high #rt-bottom {
padding: 0px 0px 15px 0;
}

November 15, 2012 at 9:09 am #114417

vikingcourt
Member

Hi @Watson90 thanks for the response.

Unfortunately, .rt-block is used for _all_ the widgets/blocks on the site. So if i change the padding for the parent, they all go out of line and start crashing into each other :)

(For example, scroll down the page @ The twitter feeds, posts etc)

November 15, 2012 at 9:21 am #114418

Paulie_D
Member

Try this

#rt-header .rt-block {
margin-bottom: -15px;
}

November 15, 2012 at 9:27 am #114420

wolfcry911
Participant

line 27 of the template.css version 1.28 add the following

#rt-header .rt-block {
padding-bottom: 0;
}

edit// late again. Paulie’s negative margin works just as well

November 15, 2012 at 9:32 am #114421

vikingcourt
Member

Ah win, that did the trick :D

I do have another issue,

http://i.imgur.com/UfJ9B.png

I have a share widget which i would like to position in that navbar area (within the yellow square on that screenshot)
Unfortunately, the layout doesn’t give me a widget position that far over, so i need to manually re-position the object (hopefully just vertically as the widget does appear next to menu items if i drop it in the nav position)

Just wondering if you think something like that would be possible?

Thanks for your help guys :)

Edit:: Thanks anyway @wolfcry911 – good to know

November 15, 2012 at 9:44 am #114423

Watson90
Member

It would probably be easier to make a social network ul, then have each list item as facebook, twitter, pinterest (so on) and then float the list items to the left so they line up.

I just don’t know how much freedom you have with the code to the website.

November 15, 2012 at 9:45 am #114424

Paulie_D
Member

I think the easiest thing to do is for you to drop the widget into the navbar (albeit in the wrong place ) then we can ‘inspect’ it and offer suggestions.

November 15, 2012 at 9:54 am #114425

vikingcourt
Member

@Watson90 i have as much freedom as my knowledge lets me :)

@Paulie_D Ok it’s ready when you are, i stuck a title on it but i can remove it again.

November 15, 2012 at 10:21 am #114427

Watson90
Member

@vikingcourt

take the width: 100% out of the social wrapper div and add;

float: right;
margin: 15px 10px 0px 0px;

November 15, 2012 at 10:22 am #114429

Paulie_D
Member

Ok…it’s in the bar…so far so good.

Now, it has an id of “mr-social-sharing-toolkit-widget-2”.

If that is only used ONCE, then you could try

#mr-social-sharing-toolkit-widget-2 {
float:right;
}

That MIGHT break things but hopefully it will kick it over. You could tweak the margin or padding if you need to.

November 15, 2012 at 10:42 am #114435

vikingcourt
Member

I dumped it inside my main stylesheet…

The good news @Paulie_D is it moved the widget :D
The bad news is it has broken the body style.

I guess that’s some kind of progress (perhaps)

Edit:: @Watson90 that didn’t seem to do much :( Although, for reference – the only edit currently active is the one @Paulie_D suggested

November 15, 2012 at 10:43 am #114436

Paulie_D
Member

Broken the body style?

November 15, 2012 at 10:51 am #114438

vikingcourt
Member

Yeah sorry, the only area on the site that should be Helvetica is the Twitter stream. See screenies.

Before: http://i.imgur.com/emGWU.jpg?1

After: http://i.imgur.com/bFNvR.jpg?1

November 15, 2012 at 10:59 am #114442

Paulie_D
Member

Those are different pages.

There is nothing in what we have done that would change a font.
Author

Posts

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

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