Trending now part and movies list are not responsive. Please help.
For more details about my problem i am facing please visit netflix.com . I am making a netflix clone. The movie images occupies more width and a scrollbar appears in the bottom because of that. Also the trending section shifts down when width is reduced.
I am uploading screenahot here cause i was unable to upload the file .
8 Replies
Please put a simplified version in a codepen. Asking people to debug your code from a screenshot is unlikely to get a helpful response.
Here is the codepen link https://codepen.io/Online-Storage/pen/mdZgzKV
Okay, and what is your objective? What are you doing this for?
Looking at your code, there's a bunch of janky fixes on top of other janky fixes. For example:
You're getting a horizontal scroll because you put your
.separator inside the .content element, which turned it into a flex child, then forced it to width:100vw, so your page was 100vw + 60px from the padding on the .content. But it's not 'content', it's a 'separator' — move it out of the 'content' and remove the width and it just fits the screen.
Almost all the text on the page is in white, but you've not set a color property on any of the top-level elements, you're setting it on every individual element. That's a complete waste of time.
I'm really struggling to even diagnose what's going wrong with the 'movies' section because each element is a button that contains a div that contains a span and an image, and they all have a bunch of random properties on them.
I don't want to be patronising, but it looks like this project might be beyond your skill level.@Alex Thanks a lot for trying to help me out. Actually I am noob and learning how to code. But the problem is still there. I also recorded a video to help you understand better hope it helps.
Also shown what i want to achieve in the later part of the video
@Kevin can you please help me out here
@Ankit please don't @ people to draw them into your questions, as per #📝rules 5
Ok sorry
For that scroll error , the contents going out of parents div width so u can try like this
<div id='parent-div'>
<div id='childDiv'>
// Contents
</div>
</div>
#parent-div{
width:100%;
}
#childDiv{
width:80%;
overflow-x:scroll;
}
If u don't want to display the scroll bar , try this
#childDiv:webkit-scrollbar{
display: none;
}
And use media queries to reduce the size of images
I have this error a couple of days ago and the error usually occurs if the child elements size(width like images , or any other div ) goes beyond the parent div width