header div overlap other div

Hello,

Can you please provide some explanatory screenshots? You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online services (Google Drive, Dropbox, etc.).

Kind Regards, Roman.

Hi. Thank you for your reply.

You can see the header here: https://www.skoedecentret.dk/wp-content/uploads/2020/03/header.png

This header is created with the following css:

@media (min-width: 1200px) {.wrapper10 {
  position:relative;
  width:100%;
  max-width:1200px;
  height:100%;
  min-height:320px;
	}
}

@media (min-width: 1200px) {.divimage {  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
	min-height: 320px;
display:block; 
  background:url(https://www.skoedecentret.dk/wp-content/uploads/2020/02/boligkoeb-1-scaled.jpg);
  background-repeat:no-repeat;
  background-size:100% auto;
	clear: both;
	}
}

.divtext {
  position:relative;
  top:0!important;
  left:0!important;
  width:100%!important;
	 height:100%!important;
  padding:5% 3% 3% 3%; 
text-align:center;
	  background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
    background: rgba(204, 204, 204, 0.5);
	border-radius:10px;
	  line-height: 75%!important;
    font-weight:bold;
    color:#25292c!important;
  font-family: sans-serif!important;
	 font-size:45px;
	
}
@media (max-width: 1200px) {
  .divtext{
    font-size:37px!important;
		padding-top:0%!important; 
		margin-top:0%!important;
		position:initial!important;
		line-height: 100%!important;
		background: none!important;
  }
}

When you scroll the page, the next thing is a 2 column setup with a video on the left and some text on the right. This is created with this html code:

<div class="columns-15">
<div class="columns-11">

[video width="852" height="480" mp4="https://www.skoedecentret.dk/wp-content/uploads/2020/03/2.mp4" poster="https://www.skoedecentret.dk/wp-content/uploads/2020/03/thumbnail-1.jpg"][/video]

</div>
<div class="columns-10">
<div class="columns-12">
<img src="https://www.skoedecentret.dk/wp-content/uploads/2020/02/check.png" alt="" width="48" height="36" /> Uafh?ngig juridisk k?berr?dgivning
</div>

<div class="columns-12">
<img src="https://www.skoedecentret.dk/wp-content/uploads/2020/02/check.png" alt="" width="48" height="36" /> Specialiserede i boligk?b siden 2003
</div>

<div class="columns-12">
<img src="https://www.skoedecentret.dk/wp-content/uploads/2020/02/check.png" alt="" width="48" height="36" /> Ingen handel - ingen regning
</div>
</div>

and this css:

.columns-15 {
    float: left;
    width: 100%;
	  	margin-top:33%!important;
	  overflow: auto!important;
height: auto;
 
		}
@media only screen and (max-width: 1200px) {
    .columns-15 {
        width: 100%;
			padding:0;
margin:0;
float: left;
    }
}

.columns-10 {
    float: left;
    width: 50%!important; 
		height: 100%!important; 
	padding-top: 4% !important; 
		 padding-right: 6%!important; 
		  
			}

@media only screen and (max-width: 900px) {
    .columns-10 {
        width: 100%!important;
						padding:0!important;
margin:0 !important;
float: left;
		    }
}

.columns-11 {
    float: left;
    width: 50%;
	height: 100%!important; 
	padding-top: 5% !important; 
			}

@media only screen and (max-width: 900px) {
    .columns-11 {
        width: 100%!important;
			padding:0!important;
margin:0!important;
float: left;
    }
}

.columns-12 {
    float: left;
  padding-top: 5% !important; 
	padding-bottom: 7% !important; 
	padding-left: 5% !important; 
	font-size:18px;
	font-family: sans-serif!important;
			}

@media only screen and (max-width: 900px) {
    .columns-12 {
        width: 100%!important;
			padding:0 0 0 15!important;
margin:0!important;
float: left;
    }
}

The problem is the white space as mentioned in this picture. See this: https://www.skoedecentret.dk/wp-content/uploads/2020/03/2.png

I try to solve this problem with margin-top:33%!important;

But this shows different depending on browser type. Is there another way to control the space between the header section and the following sections. The space shouldnt be to large or to small.

Thanks.

• This reply was modified 5 years ago by Steven Stern (sterndata).
• This reply was modified 5 years ago by Steven Stern (sterndata).