Forums

vikingcourt

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

Watson90

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;
}

vikingcourt

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)

Paulie_D

Try this

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

wolfcry911

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

vikingcourt

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

Watson90

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.

Paulie_D

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.

vikingcourt

@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.

Watson90

@vikingcourt

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

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

Paulie_D

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.

vikingcourt

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

Paulie_D

Broken the body style?

vikingcourt

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

Paulie_D

Those are different pages.

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

Watson90

It looks fine to me...

Paulie_D

And me NOW!...did you change something back?

vikingcourt

Yeah, i put the code in the wrong sheet - stupid mistake!

Thanks for your help guys, it seems to be working ok (for now :))

Watson90

Good stuff!

vikingcourt

I learn something new each time things go wrong, so it's not all bad.

Thanks again :)

treehouse : what would you like to learn today?

Forums

[Solved] Trying to remove an unsightly gap