how to fit the content in all the screen resolution-CodePudding

i'm new to css, currently i'm working movie booking app. here i want to fit the seat capacity inside of screen size but its going beyond the screen. i want to keep all the seats (rows and column) in side of the screen. enter image description here

this is how its showing

i tried to increase the width but it isn't not working

.booking-row {
    max-width: 100%;
    overflow-x: auto;
}

here you can find the sample code https://jsfiddle.net/8qya5ef3/1/

can anyone help me in this

CodePudding user response：

Your setting the width to 100% which means its going to take up as much as it can so the reason your content is not fitting is because you have alot of items inside of a div and you have set the div to be in a row

So instead of this

.booking-row {
    max-width: 100%;
    overflow-x: auto;
}

Do this

max-width: 100vw; // Meaning the witdh will be the screen size
overflow-x: auto;

CodePudding user response：

.booking-row {
  background: url('https://i.stack.imgur.com/rVSVL.png') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}