0

I'm working on my first project, which is supposed to become a blog one day. I'm currently trying to design the homepage, and, until a certain point, everything was pretty fine. But then something happened and an overflow appeared. I don't know what causes it. I'm using box-sizing: border-box just to be sure there are no hidden borders or margins or padding causing this problem, but it's still there.

By the way, my aim is to make the page responsive, that's why I'm trying to use scalable width and height as much as possible. Maybe that's where the problem lies? 

width: calc(100vw); max-width: 4000px;
height: calc(5vh); max-height: 112.5px;

Here's the fiddle: https://jsfiddle.net/u7vqz0cq/

Any ideas?

Philip Andrews
  • 3
  • 1
  • BTW `* {margin: 0 auto;}` is blwach – Roko C. Buljan Jul 15 '17 at 19:14
  • Do you know that you don't need to set width to a block-level element (like DIV) for it to be in full-width? Also `width: calc(100vw)` makes no sense. There's nothing to calc. – Roko C. Buljan Jul 15 '17 at 19:16
  • You're wrapping `` in ` – Roko C. Buljan Jul 15 '17 at 19:20
  • Your document ends with ` – Roko C. Buljan Jul 15 '17 at 19:21
  • @RokoC.Buljan why is it blwach? I simply center everything on the page, am I not? – Philip Andrews Jul 15 '17 at 19:22
  • `height: 112.5px` where did you get that `.5` from? – Roko C. Buljan Jul 15 '17 at 19:22
  • Why do you use `max-width: 4000px;`? What's that for? – Roko C. Buljan Jul 15 '17 at 19:24
  • @RokoC.Buljan I'm an absolute newbie mate, don't judge me too harsh ;) – Philip Andrews Jul 15 '17 at 19:24
  • I'm not judging :) just pointing to absolutely strange errors. You're over-complicating your CSS. It's much easier than that. Also don't use `font-size: 2vh;` ... too many wrong things to put them all in one place – Roko C. Buljan Jul 15 '17 at 19:28
  • Also, when and where it's possible try to avoid `z-index`. Not that it's wrong, but most likely it's all doable without it by simply placing the HTML elements in the right place – Roko C. Buljan Jul 15 '17 at 19:30
  • @RokoC.Buljan Okay, thanks! 1) I'm using "max-width: 4000px;" to review responsiveness (zooming in and out). Also, it helps me define some final resolution to which I can scale other elements. 2) Why should I avoid "z-index"? What would you suggest instead of it? 3) What would you suggest instead of "font-size: 2vh;"? I couldn't find anything more responsive... 4) "height: 112.5px" is a percentage of max-height, I think. 5) I used a div to wrap "body". Is that wrong or it's simply something entirely different? – Philip Andrews Jul 15 '17 at 19:48

1 Answers1

0

Sole reason of overflow here is use of 100vw. As soon as you set the width of some block tag, it will have a overflow. Similar is the case with 100vh. It makes the tag overflow vertically.

And using calc(100vw) is also pointless, instead you can use 100% if required like this.

#header {
        width: 100%;
    max-width: inherit;
        height: calc(5vh); max-height: 112.5px;
    }

Here is the updated jsfiddle.

https://jsfiddle.net/u7vqz0cq/1/

Vibhanshu
  • 522
  • 3
  • 14
  • Why does block have an overflow with 100vw if it's basically the same as 100%? Also, isn't vw/vh more responsive-friendly than %? Thanks for the fiddle by the way! – Philip Andrews Jul 15 '17 at 19:58
  • Can't say exactly why? But you can check this ans https://stackoverflow.com/a/26939293/3323709 @PhilipAndrews – Vibhanshu Jul 15 '17 at 20:02