Tahtoh Tahtoh - 2 months ago 6
CSS Question

Divs and image not scaling, responsiveness

the div:preview-movie not taking the rest of the width.

the itunes div overscaling on big screens.

on small screens how can the logo div get smaller and the details-movie div go under.

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;
width: 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{
display: flex;
width: 100vh;
}
.preview-movie .youtube-vid{
justify-content: center;
width: 100%;
height: 100%;
height: auto;
}

Answer

Thanks for providing all the code that is actually needed to solve the problem!

Here's a couple of things that may help:

1) You've used width: 100vh; in both .details-movie and .preview-movie. vh is based on the height, not the width. You want the inner div (.preview-movie) to be width: 100%, and then only manipulate the width of the parent. You may want width: 100vw on the parent, but it would be more sensible to give both .details-movie and .logo a percentage-based width. That way both will scale responsively. Just remember to ensure that the two divs add to a total of 100%!

2) I'm not 100% sure what you mean by "the itunes div overscaling on big screens", but I assume that you're talking about the image getting stretched. It already has a max-width, so it will never escape those bounds (300px). Simply replace height: 30% with width: 100%. That will ensure the picture won't get hidden, and will also make it retain its proportions.

3) For your third point, I'm also not quite sure what you mean. I believe you want to decrease the size of the logo and put the .details-movie div 'underneath' on smaller screens. That can be done with a media query:

@media (max-width: 900px) { // Whatever size you'd like to affect
   .logo {
        width: 66px; // Whatever size changes you'd like 
    }
    .container {
        display: block;
    }
}

I've made a fiddle where you can see these changes over at https://jsfiddle.net/Lnr2tt37/. There's still a lot of work to be done, but hopefully the changes reflect the points you've raised in this question. The rest is up to you to work out ;)

Hope this helps!

EDIT AFTER COMMENT:

1) To fix the problem of nav not taking up the full width on mobile devices, you can simply add:

@media (max-width: 600px) {
    body > div > nav {
        flex: 100%;
    }
}

600 pixels looks about right to me, but you may need to adjust that breakpoint.

2) To ensure that both nav and main take up the full vertical height, you could use something like the following:

@media (min-width: 601px) { // One pixel more than the max-width breakpoint
    body > div > nav {
        min-height: 100vh;
    }

Note that you'll only want this to happen when nav and main are next to each other, as otherwise nav will become massive!

3) To ensure that the YouTube video (iframe) takes up full width, you just need to give it a width of 100%. Not that you'll probably want to give it a height as well, for better display. Unfortunately, the way that iframes work makes it incredibly difficult to make them responsive, so you will always get a bit of a black bar at certain widths. This height seems to work pretty well for me, but you may want to adjust it:

iframe {
   width: 100%;
   height: 344px;
}

I've updated the fiddle to reflect this, and the changes can be found over at https://jsfiddle.net/Lnr2tt37/2/.

Hopefully this all helps :)

Comments