White Space when using max-width

HTML & CSS
,
1

hello guys i got a white useless space in the middle of my html page and i dont actually know why,
Another question is is my page kinda responsive? and how can i implement the fast that when its on a mobile website the informations of the logo just go on top of the description and video,if someone has ideas on how to implement a good design im hearing, thanks.

HTML CODE:

<!DOCTYPE html>
<html>
<head>
	<title>Page-movie-x</title>
	<link rel="stylesheet" href="page-film.css">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<META HTTP-EQUIV="refresh" CONTENT="15">
</head>
<body>
	<div class="dropdown-menu">
		<p>
      		menu dropdown
      	</p>
    </div>
	<div class="container">
		
		<div class="logo">
			<div class="movie-name">
				A Name 
			</div>
			<div class="Itunes-link">
				<img src="http://dxm2idf2u6bml.cloudfront.net/rest/serve/THUMBNAILS/55b856e3-c26f-416f-ac65-c588230582ee.jpg" style="height:90%;width:90%;">
			</div>
			<div class="date-out">
				Date de sortie : / / 
			</div>
			
      		<div class="rating">
				<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
			</div>
		</div>
		<div class="details-movie">
			<div class="description-movie">
				
			</div>
			<div class="preview-movie">
				<iframe width="90%" height="90%" src="https://www.youtube.com/embed/eEZ0u9xI2yo" frameborder="0" allowfullscreen"></iframe>

			</div>
		</div>
	</div>

</body>
</html>

CSS CODE:

.container{
  display:flex;
  justify-content: space-between;
  
}
.dropdown-menu{
	width: 100%;
	height: 5vh;
	background-color: blue;
}

.logo{
	max-width: 300px;
	height: 100vh;
	
	background-color: red;
}

.details-movie{
	height: 100vh;
	background-color: grey;
	overflow: hidden;
}
.movie-name{background-color: yellow;}
.Itunes-link{
	height: 30%;
	background-color: green;
}
body{
	width: 100%;
	height: 100%;
}
.rating > span:hover:before {
   content: "\2605";
   position: absolute;
}

.description-movie{height:31.85%;
	background-color: white;
}
.preview-movie{
	height:70%;
	
	background-color: black;
	}
2

It’s because of this:-

justify-content: space-between;

There are some other issues.
The viewport meta tag should have an initial scale:-

<meta name=viewport content="width=device-width, initial-scale=1">

This is really annoying:-

<META HTTP-EQUIV="refresh" CONTENT="15">

In-line styling is so last millennium, don’t do it if you have any pride in your work.

style="height:90%;width:90%;"

The image should have height: auto to maintain correct aspect.

Width and height attribute only accept pixels as units and as such should not define any unit:-

<iframe width="90%" height="90%" src="" frameborder="0" allowfullscreen">

To give it % sizing, use css, same goes for the obsolete frameborder attribute.

This may help you identify problems in your code:-

3 Likes
3

I’ve mad the changes you’ve told me, and still when the image is on a big screen it gets bigger when i want here to stay at 300px;
and the preview-movie class just doesn’t wanna get the full row of the container even if i said take 100%.

  • when the screen gets smaller the container details-movie dissapears
    the video became small when i wanted here to take a 80% of preview-movie centered ,
    these 2 are my main problems, if you could correct me thanks.
    html code:
<!DOCTYPE html>
<html>
<head>
	<title>Page-movie-x</title>
	<link rel="stylesheet" href="page-film.css">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<META HTTP-EQUIV="refresh" CONTENT="15">
</head>
<body>
	<div class="dropdown-menu">
		<p>
      		menu dropdown
      	</p>
    </div>
	<div class="container">
		
		<div class="logo">
			<div class="movie-name">
				A Name 
			</div>
			<img class="Itunes-link" src="http://dxm2idf2u6bml.cloudfront.net/rest/serve/THUMBNAILS/55b856e3-c26f-416f-ac65-c588230582ee.jpg" >
			
			<div class="date-out">
				Date de sortie : / / 
			</div>
			
      		<div class="rating">
				<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
			</div>
		</div>
		<div class="details-movie">
			<div class="description-movie">
				
			</div>
			<div class="preview-movie">
				<iframe  class="youtube-vid" src="https://www.youtube.com/embed/eEZ0u9xI2yo"  ></iframe>

			</div>
		</div>
	</div>

</body>
</html>

CSS CODE:

.container{
  display:flex;
  
}
.dropdown-menu{
	width: 100%;
	height: 5vh;
	background-color: blue;
}

.logo{
	max-width: 300px;
	height: 100vh;
	
	background-color: red;
}

.details-movie{
	height: 100vh;
	background-color: grey;
	
}
.movie-name{background-color: yellow;}
.Itunes-link{
	height: 30%;
	max-width: 300px;
	max-height: 300px;
	background-color: green;
}

body{
	width: 100%;
	height: 100%;
}
.rating > span:hover:before {
   content: "\2605";
   position: absolute;
}

.description-movie{height:32%;
	background-color: white;
}
.preview-movie{
	
	background-color: black;
	}
.preview-movie .youtube-vid{
	height:100% ;
	width:100%;
}
4

I’m no CSS guru, but box-sizing might help you out? This is what I do for my container → 

.container {
  /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
  *zoom: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.container:after {
  clear: both;
}
.container:before,
.container:after {
  content: " ";
  display: table;
}
1 Like
5

how can i implement thaat on my case?

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.