How to make responsive horizontal cards?
I want to create responsive horizontal cards but failing in all cases. I kind of tried to give different background image according to to the viewport but still failing to accomplish.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <!-- Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <!-- Material Design Bootstrap --> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet"> <!-- add icon link --> <link rel="icon" href="./img/icon1.icon" type="image/x-icon"> <link rel="stylesheet" href="pool.css"> <link rel="stylesheet" href="font.css"> <!-- scrollReveal property --> <script src="https://unpkg.com/scrollreveal@4"></script> <script> window.sr = ScrollReveal({ distance: '50px', //for animation of page scroll duration: 1000, easing: 'ease', mobile: true, reset: true, viewFactor: 0.4, }); </script> <title>Pool2 | PLAY4LUX</title> </head> <body> <div class="poolContainer"> <div class="container-fluid"> <div class="row "> <div class="col"> <div class="poolBackground hoverable"> <div class="row poolContentRow"> <!-- Image Container --> <div class="col-sm-5"> <div class="poolImageContainer"></div> </div> <!-- pool Right side content --> <div class="col-sm-7"> <div class="poolRightContentContainer"> <h3 class="productName gara">GIORGIO ARMANI</h3> <!-- drawdate --> <div class="drawDate clearfix gara"> <h6 class="title">Draw Date :</h6> <h5 class="data float-right">10 / 09 /2020</h5> </div> <!-- winning odds --> <div class="winningOdd clearfix gara"> <h6 class="title">Winning Odds :</h6> <h5 class="data float-right focused">10 / 300</h5> </div> <!-- Actual Price --> <div class="actualPrice clearfix gara"> <h6 class="title">Actual Price :</h6> <h5 class="data float-right">180,000.0/-</h5> </div> <!-- token Price --> <div class="tokenPrice clearfix gara"> <h6 class="title">Token Price :</h6> <h5 class="data float-right focused">180/-</h5> </div> <!-- button --> <div class="buyTicket text-center"> <button class=" btnGold">Buy Ticket</button> </div> </div> </div> </div> </div> </div> <div class="col"> <div class="poolBackground hoverable"> <div class="row poolContentRow"> <!-- Image Container --> <div class="col-sm-5"> <div class="poolImageContainer"></div> </div> <!-- pool Right side content --> <div class="col-sm-7"> <div class="poolRightContentContainer"> <h3 class="productName gara">GIORGIO ARMANI</h3> <!-- drawdate --> <div class="drawDate clearfix gara"> <h6 class="title">Draw Date :</h6> <h5 class="data float-right">10 / 09 /2020</h5> </div> <!-- winning odds --> <div class="winningOdd clearfix gara"> <h6 class="title">Winning Odds :</h6> <h5 class="data float-right focused">10 / 300</h5> </div> <!-- Actual Price --> <div class="actualPrice clearfix gara"> <h6 class="title">Actual Price :</h6> <h5 class="data float-right">180,000.0/-</h5> </div> <!-- token Price --> <div class="tokenPrice clearfix gara"> <h6 class="title">Token Price :</h6> <h5 class="data float-right focused">180/-</h5> </div> <!-- button --> <div class="buyTicket text-center"> <button class=" btnGold">Buy Ticket</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js " integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n " crossorigin="anonymous "></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js " integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo " crossorigin="anonymous "></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js " integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 " crossorigin="anonymous "></script> <!-- MDB core JavaScript --> <script type="/text/javascript " src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/js/mdb.min.js "></script> </body> </html> CSS
.container-fluid { width: 78%; margin: 0 auto; } .poolBackground { background-image: url("image/r/Group\ [email protected]"); background-position: center; background-size: cover; background-repeat: no-repeat; width: 565px; height: 288px; position: relative; } .poolImageContainer { background-image: url(imgi1.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; width: 204px; height: 264px; position: absolute; top: 11px; left: 30px; box-shadow: 3px 5px 18px 0px #08061a; border-width: 4px; border-style: solid; border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1; } .poolRightContentContainer { position: absolute; top: 38px; padding-left: 28px; width: 80%; } .productName { font-size: 20px; background: linear-gradient(45deg, #8e602c, #f8ed8d); background: -webkit-linear-gradient(90deg, #8e602c, #f8ed8d, #8e602c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 3px 3px #000); font-weight: 900; margin-bottom: .9rem; } .title { display: inline-block; font-size: 17px; font-weight: 600; background: -webkit-linear-gradient(90deg, #fff, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } .data { font-size: 19px; background: -webkit-linear-gradient(90deg, #fff, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } .focused { font-size: 20px; background: -webkit-linear-gradient(90deg, #f8ed8d, #f8ed8d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; } .drawDate, .winningOdd, .actualPrice, .tokenPrice { background: -webkit-linear-gradient(90deg, #fff, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 4px 3px #000); font-weight: 600; margin-bottom: .6rem; } /* On hover style */ .tokenPrice .title { position: absolute; right: 5px; top: -39px; } .tokenPrice .data { position: absolute; right: 24px; border: 1px solid yellow; padding: 2px 6px; } .actualPrice .data { position: absolute; top: 42px; left: 5px; border: 1px solid yellow; padding: 2px 6px; /* box-shadow: 0px 6px 21px -9px black; */ } .poolBackground:hover .tokenPrice .title { position: initial; } .poolBackground:hover .tokenPrice .data { position: initial; border: none; } .poolBackground:hover .actualPrice .data { position: initial; border: none; } .poolBackground:hover .productName, .drawDate, .winningOdd, .actualPrice, .tokenPrice { margin-bottom: .5rem; } /* end of on hover transition */ .buyTicket { visibility: hidden; transform: translateY(-17px); margin-top: 17px; } .poolBackground:hover .buyTicket { visibility: visible; } .btnGold { border-width: 1px; border-style: solid; border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1; font-size: 18px; background: linear-gradient(45deg, #8e602c, #f8ed8d); background: -webkit-linear-gradient(45deg, #8e602c, #f8ed8d, #8e602c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 4px 20px; box-shadow: 8px 4px 15px black; } /* media queries */ @media (min-width:1800px) and (max-width: 1920px) { .poolBackground { width: 100%; height: 47vh; } .poolImageContainer { width: 13.594vw; height: 324px; } .poolRightContentContainer { top: 56px; } } @media (min-width:1387px) and (max-width: 1525px) { .poolBackground { background-image: url(image/r/Group\ [email protected]); width: 100%; height: 288px; } .poolImageContainer { width: 12.625vw; } } @media (min-width:565px) and (max-width: 1386px) { .poolBackground { background-image: url(image/r/Group\ [email protected]); height: 288px; } .col { flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: auto; } .poolImageContainer { width: 193px; } } The things which i tried were:
-
tried giving image in html itself. it was resizing with vw but the inside contents were not resizing with it properly.
-
I thought of giving full block for one card on mobile and medium dimensions and two cards per row in large and above dimensions like in above picture but failed to accomplish it.
Have you tried controlling the div itself rather than the picture? You’d make the size of the containing div itself vary according to viewport, and the image CSS would look something like this:
img { max-width: 100%; height: auto; } 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <!-- Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <!-- Material Design Bootstrap --> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet"> <!-- add icon link --> <link rel="icon" href="./img/icon1.icon" type="image/x-icon"> <link rel="stylesheet" href="pool.css"> <link rel="stylesheet" href="font.css"> <!-- scrollReveal property --> <script src="https://unpkg.com/scrollreveal@4"></script> <script> window.sr = ScrollReveal({ distance: '50px', //for animation of page scroll duration: 1000, easing: 'ease', mobile: true, reset: true, viewFactor: 0.4, }); </script> <title>Pool2 | PLAY4LUX</title> </head> <style> .container-fluid { width: 78%; margin: 0 auto; } .poolBackground { background-image: url("image/r/Group\ [email protected]"); background-position: center; background-size: cover; background-repeat: no-repeat; max-width: 565px; width: 100%; min-height: 288px; position: relative; } .poolImageContainer { background-image: url(imgi1.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; max-width: 204px; width: 100%; min-height: 264px; /*position: absolute;*/ top: 11px; left: 30px; box-shadow: 3px 5px 18px 0px #08061a; border-width: 4px; border-style: solid; border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1; } .poolRightContentContainer { /*position: absolute;*/ top: 38px; padding-left: 28px; width: 80%; } .productName { font-size: 20px; background: linear-gradient(45deg, #8e602c, #f8ed8d); background: -webkit-linear-gradient(90deg, #8e602c, #f8ed8d, #8e602c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 3px 3px #000); font-weight: 900; margin-bottom: .9rem; } .title { display: inline-block; font-size: 17px; font-weight: 600; background: -webkit-linear-gradient(90deg, #fff, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } .data { font-size: 19px; background: -webkit-linear-gradient(90deg, #fff, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } .focused { font-size: 20px; background: -webkit-linear-gradient(90deg, #f8ed8d, #f8ed8d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; } .drawDate, .winningOdd, .actualPrice, .tokenPrice { background: -webkit-linear-gradient(90deg, #fff, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 4px 3px #000); font-weight: 600; margin-bottom: .6rem; } /* On hover style */ .tokenPrice .title { /*position: absolute;*/ right: 5px; top: -39px; } .tokenPrice .data { /*position: absolute;*/ right: 24px; border: 1px solid yellow; padding: 2px 6px; } .actualPrice .data { /*position: absolute;*/ top: 42px; left: 5px; border: 1px solid yellow; padding: 2px 6px; /* box-shadow: 0px 6px 21px -9px black; */ } .poolBackground:hover .tokenPrice .title { position: initial; } .poolBackground:hover .tokenPrice .data { position: initial; border: none; } .poolBackground:hover .actualPrice .data { position: initial; border: none; } .poolBackground:hover .productName, .drawDate, .winningOdd, .actualPrice, .tokenPrice { margin-bottom: .5rem; } /* end of on hover transition */ .buyTicket { visibility: hidden; transform: translateY(-17px); margin-top: 17px; } .poolBackground:hover .buyTicket { visibility: visible; } .btnGold { border-width: 1px; border-style: solid; border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1; font-size: 18px; background: linear-gradient(45deg, #8e602c, #f8ed8d); background: -webkit-linear-gradient(45deg, #8e602c, #f8ed8d, #8e602c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 4px 20px; box-shadow: 8px 4px 15px black; } /* media queries */ @media (min-width:1800px) and (max-width: 1920px) { .poolBackground { width: 100%; height: 47vh; } .poolImageContainer { width: 13.594vw; height: 324px; } .poolRightContentContainer { top: 56px; } } @media (min-width:1387px) and (max-width: 1525px) { .poolBackground { background-image: url(image/r/Group\ [email protected]); width: 100%; height: 288px; } .poolImageContainer { width: 12.625vw; } } @media (min-width:565px) and (max-width: 1386px) { .poolBackground { background-image: url(image/r/Group\ [email protected]); height: 288px; } /*.col { flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: auto; }*/ .poolImageContainer { width: 193px; } } </style> <body> <div class="poolContainer"> <div class="container-fluid"> <div class="row "> <div class="col-md-6"> <div class="poolBackground"> <div class="row poolContentRow hoverable"> <!-- Image Container --> <div class="col-sm-5"> <div class="poolImageContainer"></div> </div> <!-- pool Right side content --> <div class="col-sm-7"> <div class="poolRightContentContainer"> <h3 class="productName gara">GIORGIO ARMANI</h3> <!-- drawdate --> <div class="drawDate clearfix gara"> <h6 class="title">Draw Date :</h6> <h5 class="data float-right">10 / 09 /2020</h5> </div> <!-- winning odds --> <div class="winningOdd clearfix gara"> <h6 class="title">Winning Odds :</h6> <h5 class="data float-right focused">10 / 300</h5> </div> <!-- Actual Price --> <div class="actualPrice clearfix gara"> <h6 class="title">Actual Price :</h6> <h5 class="data float-right">180,000.0/-</h5> </div> <!-- token Price --> <div class="tokenPrice clearfix gara"> <h6 class="title">Token Price :</h6> <h5 class="data float-right focused">180/-</h5> </div> <!-- button --> <div class="buyTicket text-center"> <button class=" btnGold">Buy Ticket</button> </div> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="poolBackground"> <div class="row poolContentRow hoverable"> <!-- Image Container --> <div class="col-sm-5"> <div class="poolImageContainer"></div> </div> <!-- pool Right side content --> <div class="col-sm-7"> <div class="poolRightContentContainer"> <h3 class="productName gara">GIORGIO ARMANI</h3> <!-- drawdate --> <div class="drawDate clearfix gara"> <h6 class="title">Draw Date :</h6> <h5 class="data float-right">10 / 09 /2020</h5> </div> <!-- winning odds --> <div class="winningOdd clearfix gara"> <h6 class="title">Winning Odds :</h6> <h5 class="data float-right focused">10 / 300</h5> </div> <!-- Actual Price --> <div class="actualPrice clearfix gara"> <h6 class="title">Actual Price :</h6> <h5 class="data float-right">180,000.0/-</h5> </div> <!-- token Price --> <div class="tokenPrice clearfix gara"> <h6 class="title">Token Price :</h6> <h5 class="data float-right focused">180/-</h5> </div> <!-- button --> <div class="buyTicket text-center"> <button class=" btnGold">Buy Ticket</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js " integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n " crossorigin="anonymous "></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js " integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo " crossorigin="anonymous "></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js " integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 " crossorigin="anonymous "></script> <!-- MDB core JavaScript --> <script type="/text/javascript " src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/js/mdb.min.js "></script> </body> </html> Few amendments.. but still i suggest to re-write the or i can write for you from scratch if u want.. cheers bro… Happy to Help…
