1

OK, problem is, i set the width and height of the to viewport size, but if i write any text inside <h1></h1> , scrollbars appear. i cant figure out why it behaves like this, i suppose i'm doing something noobish. I've made some designs just with HTML and CSS and never came across something like this, this time i was trying to do some responsive design testing with FlexBoxGrid and came across this. as i said, as soon as i delete the text inside <h1></h1> scrollbars disapear. same thing happens with those commented <h3></h3>. happens with <p></p> too... :/

<body>
<!-- HEADER SECTION -->
<header id="sec_home">
    <div class="row center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h1>sdfsdf</h1>
            <!--<h3>
                The beast.
            </h3>
            <h3>
                The best.
            </h3>-->
        </div>
    </div>
</header>

<!-- BIOGRAPHY SECTION -->
<section id="sec_bio">

</section>


* {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: 'BlkLite'; /*a name to be used later*/
    src: url('/fonts/BlkLite.ttf'); /*URL to font*/
}

h1 {
    font-family: 'BlkLite';
    font-size: 8em;
    color: rgb(206, 206, 206);
    background-color: blueviolet;
}

#sec_home {
    background-image: url("/bg/14582.jpg");
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
}
TheBandolero
  • 45
  • 9
  • When I paste your code into Codepen, I can't reproduce the problem you're having as you describe it. Is it really when you add text to the H1 and H3 within the header? Or is it when you add any text to the Biography section? – cathryngriffiths Jun 25 '18 at 22:35
  • yeah, when i add it into the H1. also happens with the commented H3s, and have tried P too and also happens :/ – TheBandolero Jun 25 '18 at 22:42

1 Answers1

0

it sounds to me like the content going into this flex-box grid is expanding the area that you are working on.

try adding "box-sizing : border-box " to the item with flex-box on it? that might work out for you.

also, if it comes down to it...it's dirty but... overflow-y: hidden and overflow-x: hidden will remove the overflow of that container and make it so it will not scroll...but again...its dirty in my opinion.

Ryan Abreu
  • 11
  • 1
  • i will try the border-box solution. i tried Overflow: hidden and it worked, but then it prevented me from scrolling down when adding content to the 'bio' section, so that didnt really work. – TheBandolero Jun 25 '18 at 22:44