Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Vipul-Gejage/Disney-Hotstar-Clone/llms.txt

Use this file to discover all available pages before exploring further.

All layout values in the Disney+ Hotstar Clone are plain CSS in Hotstar.css — there is no preprocessor, no CSS variables, and no build step. Every dimension, padding, and spacing value is a literal pixel or percentage figure written directly in the rule. To change the layout, open Hotstar.css, find the relevant selector, and edit the value. The sections below identify each key layout property, its current value, and what to watch out for when changing it.

​
Key Layout Properties

The table below covers every major structural dimension found in Hotstar.css.
ComponentSelectorPropertyValue
Navbar.navbarheight80px
Navbar.navbarpadding0 4%
Hero carousel.carousel-containerheight450px
Movie card.cardmin-width / width150px
Movie card.cardheight200px
Movie row.movies-listheight220px
Video card row.video-card-containerheight10vw
Brand logo.brand-logoheight70px
The hero banner carousel is controlled by .carousel-container. Its height is set to a fixed 450px: 
.carousel-container {
    position: relative;
    width: 100%;
    height: 450px;
    padding: 20px 0;
    overflow-x: hidden;
    margin-top: 80px;
}
The inner .carousel and each .slider child both inherit height: 100%, so changing the value on .carousel-container is the only edit needed to resize the entire banner area. The margin-top: 80px matches the fixed navbar height — if you also change the navbar height, update this margin to keep the carousel clear of the navbar. 
/* Example: taller banner */
.carousel-container {
    height: 600px;
    margin-top: 80px; /* keep in sync with .navbar height */
}

​
Movie Card Size

Each movie poster card is sized with explicit min-width, width, and height on .card: 
.card {
    position: relative;
    min-width: 150px;
    width: 150px;
    height: 200px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
    transition: .5s;
}
The card image fills the card through .card-img: 
.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
Because .card-img uses width: 100% and height: 100%, resizing the card is a single-selector change. Set both min-width and width to the same value to prevent cards from shrinking in flex layouts: 
/* Example: larger cards */
.card {
    min-width: 180px;
    width: 180px;
    height: 240px;
}
Also update .movies-list height to give the taller cards enough room — the row wrapper currently has height: 220px, which only provides 20px of clearance above the 200px cards. The navbar padding determines how far content is inset from the browser edges: 
.navbar {
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 4%;
    background: #0c111b;
    z-index: 0;
    display: flex;
    align-items: center;
}
The padding: 0 4% gives 4% left/right inset. The same 4% inset is applied to section titles via padding-left: 4% on .title. The scroll arrow buttons (.pre-btn, .nxt-btn) are absolutely positioned flush at left: 0 and right: 0 of their .movies-list container, not inset by 4%. The main content areas use a slightly tighter width: 92% with margin: auto on .card-container and .video-card-container. To change the overall page side margins, update the padding on .navbar and the padding-left on .title: 
.navbar {
    padding: 0 6%; /* wider margin */
}
.title {
    padding-left: 6%;
}

​
Responsive Behavior

The project is desktop-first and does not include media queries. At smaller viewport widths, the fixed-pixel card sizes and navbar height will cause horizontal overflow. To add basic responsiveness, you can introduce media queries directly in Hotstar.css: 
@media (max-width: 768px) {
    .navbar {
        height: 60px;
        padding: 0 3%;
    }
    .carousel-container {
        height: 250px;
        margin-top: 60px;
    }
    .card {
        min-width: 110px;
        width: 110px;
        height: 150px;
    }
    .movies-list {
        height: 175px;
    }
    .video-card-container {
        height: 20vw;
    }
}
The franchise video card row uses height: 10vw, which is already viewport-relative and scales naturally. The slider image is sized at width: 70% within each .slider — this keeps the image on the right while the text overlay occupies the left, but at narrow viewports the text and image will overlap.

​
Key Layout Rules from Hotstar.css

The following block consolidates the most commonly adjusted layout declarations: 
/* Navbar */
.navbar {
    height: 80px;
    padding: 0 4%;
}

/* Brand logo */
.brand-logo {
    height: 70px;
}

/* Hero carousel */
.carousel-container {
    height: 450px;
    margin-top: 80px;
}

/* Franchise video row */
.video-card-container {
    height: 10vw;
    width: 92%;
    margin: auto;
}

/* Movie row wrapper */
.movies-list {
    height: 220px;
    margin: 10px 0 20px;
}

/* Scrollable card strip */
.card-container {
    width: 92%;
    height: 220px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
}

/* Individual movie card */
.card {
    min-width: 150px;
    width: 150px;
    height: 200px;
    margin-right: 10px;
}
.card-container uses overflow-x: auto to enable horizontal scrolling through the movie rows. Do not set overflow: hidden on .card-container or .movies-list — doing so will clip the cards and break the scroll interaction entirely. If you want to hide the scrollbar while keeping scroll functionality, the source already handles this with .card-container::-webkit-scrollbar { display: none; } for WebKit-based browsers.

Build docs developers (and LLMs) love

Get started for freeTalk to us