G-man G-man - 6 months ago 11
HTML Question

When resizing my div, content falls out and i get a scrollbar to adjust the screen horizontally. (site to wide)

Hello i get this problem when i try to resize my window for mobile, that the pseude element :after and :before (the 2 lines next to my title) fall out of the site and create a horizontal scrollbar for the user (which i do not want).

my jsfiddle: https://jsfiddle.net/cvgua1s2/1/ try resizing it to mobile to see the problem.

html:

<section class="slogan wow">
<h1 class="slogantitel wow fadeIn"> Ontdek ons</h1>
</section>


css:

.slogan {
position: relative;
height: 30%;
min-height:100px;
width: 100%;
margin-top: 100px;
}

.slogan-content {
text-align: center;
}

h1.slogantitel {
font-size: 4em;
text-align: center;
margin: 0;
color: rgb(95,55,17);
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}

.slogantitel:before, .slogantitel:after {
content: "";
display: inline-block;
width: 10%;
margin: 0 .5em 0 -55%;
vertical-align: middle;
border-bottom: 1px solid;
}

.slogantitel:after {
margin: 0 -55% 0 .5em;
}

Answer

try to add overflow: hidden; for h1.slogantitel, it will prevent h-scrollbar from appearing.