CODEWITHSUNDEEP
csshtmlresponsive-design
Nasco.Chachev
Nasco.Chachev

Reputation: 676

Removing the white space & prettier css

I've made my own static website from scratch using html5 and css(3) only.But I have got 2 issues.

The first one is the white space between the top's menu and header's image bottom.I've tried everything.

Maybe the only solution for that is float:left; but then the image goes into the navigation tag or negative value on margin's property but I've heard that this technique is bad.

The second issue I'll display via image http://www.filedropper.com/discoversite that's my simple WebSite. I know my css is awful but I'm still a beginner. The second issue is here. http://postimg.org/image/5adp6379d/ . As you can see the text is going out of the box. (I am using % in css for more responsive). I will be glad if anyone can help me.

Upvotes: 0

Views: 1326

Answers (1)

Jibbow
Jibbow

Reputation: 757

  1. I can only have a guess for your first issue as I don't know the exact code for your website (create jsfiddle :D ). Try to apply vertical-align: bottom; or display: block; to your header image. Why? Because images are placed like text and some letters like g, j, q and p are going underneath the bottom level. Your browser will leave a tiny space for these letters. Also setting a min-width is a good solution like Kirk Logan said.

  2. And for your second problem there are multiple solutions (depending on what you want):

    • You can handle your content with overflow: hidden; or overflow: scroll as Kirk Logan suggested. But this wouldn't make any sense in the case you have shown us in the picture.

    • Or (is a little more complex) you could remove the white borders on the left and right side (just when the screen is too small) in order to gain more space for the text. This can be done by:

      @media only screen and (max-width: 768px) { 
    #BigBorder1 { border-width: 0px; }
    #BigBorder2 { border-width: 0px; }
}

Everthing inside the outer brackets will only be applied when the screen's width is smaller than 768px. But to be honest this is usually done the other way round: When the screen is bigger than 768px then something happens. This simplification is only in order to make it easier for you.

Upvotes: 1

Related Questions