How do I make this responsive for mobile view? and also provide spacing for tv show div

Question

I want to centre the searched images of shows and also provide spacing below every image. The 12 col grid isn't working around properly. The images are aligned properly in desktop view but doesn't in mobile view. How to fix this with css and bootstrap. But the grid is not working. Could you please help me out?

 const form = document.querySelector('#search-form'); const container = document.querySelector('#container'); form.addEventListener('submit',async function(e){ e.preventDefault(); const searchTerm = form.elements.query.value; const config = { params: { q:searchTerm}} const res = await axios.get(`http://api.tvmaze.com/search/shows`,config); clear(); displayShows(res.data); form.elements.query.value=''; }) const displayShows = (shows) =>{ for (let res of shows){ if(res.show.image){ const div = addShow(res); container.appendChild(div); } } } const addShow = (res) => { const div=document.createElement('DIV'); const img=document.createElement('IMG'); img.src = res.show.image.medium; const spanName=document.createElement('P'); spanName.textContent=res.show.name; div.append(img); return div; } function clear(shows){ container.innerHTML = ''; }

 *{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-color: #8EC5FC; background-image: linear-gradient(120deg, #fc8eed 0%, #E0C3FC 50%, #ffffff 100%); font-family: "Poppins", sans-serif; min-height: 100vh; } header{ font-size: 1.5rem; color: #960189;; } header,form { min-height: 20vh; display: flex; justify-content: center; align-items: center; } form input, form button { padding: 0.4rem; font-size: 1.6rem; border: none; background: white; margin-right: 10px; } form input{ width: 27%; border-radius: 10px; } form button { color: white; background: #e44ad7; cursor: pointer; border-radius: 8px; transition: all 0.3s ease; } form button:hover { background: white; color: #e44ad7; }.container{ margin: 5%; }.container div{ display: inline; padding: 3%; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min:css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <link rel="stylesheet" href="./TV_ShowSearch:css"> <script src="https.//cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <title>TV SHOW SEARCH</title> </head> <body> <header> <h1>TV SHOW SEARCH</h1> </header> <form autocomplete="off" id="search-form"> <input type="text" placeholder="TV Show Title" name="query"> <button id="search-btn">Search</button> </form> <div class="container align-items-center" id="container"> </div> <script src="./TV_ShowSearch.js"></script> </body> </html>

enter image description here

Answer 1

You can use following code in media query css:

@media only screen and (max-width: 600px) { 
  .container div {
  padding: 3%;
  width: 210px;
  margin: auto;
 }
}

Answer 2

I worked around with your CSS and Here's what I got:

 const form = document.querySelector('#search-form'); const container = document.querySelector('#container'); form.addEventListener('submit',async function(e){ e.preventDefault(); const searchTerm = form.elements.query.value; const config = { params: { q:searchTerm}} const res = await axios.get(`http://api.tvmaze.com/search/shows`,config); clear(); displayShows(res.data); form.elements.query.value=''; }) const displayShows = (shows) =>{ for (let res of shows){ if(res.show.image){ const div = addShow(res); container.appendChild(div); } } } const addShow = (res) => { const div=document.createElement('DIV'); const img=document.createElement('IMG'); img.src = res.show.image.medium; const spanName=document.createElement('P'); spanName.textContent=res.show.name; div.append(img); return div; } function clear(shows){ container.innerHTML = ''; }

 *{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-color: #8EC5FC; background-image: linear-gradient(120deg, #fc8eed 0%, #E0C3FC 50%, #ffffff 100%); font-family: "Poppins", sans-serif; min-height: 100vh; } header{ font-size: 1.5rem; color: #960189;; } header,form { min-height: 20vh; display: flex; justify-content: center; align-items: center; } form input, form button { padding: 0.4rem; font-size: 1.6rem; border: none; background: white; margin-right: 10px; } form input{ width: 27%; border-radius: 10px; } form button { color: white; background: #e44ad7; cursor: pointer; border-radius: 8px; transition: all 0.3s ease; } form button:hover { background: white; color: #e44ad7; }.container{ margin: 5%; }.container div{ display: inline; padding: 3%; } @media screen and (max-width: 642px) { form input{ width: calc(27% + 100px); } } @media screen and (max-width: 400px) { form input, form button{ width: calc(50% + 100px); } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min:css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <link rel="stylesheet" href="./TV_ShowSearch:css"> <script src="https.//cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <title>TV SHOW SEARCH</title> </head> <body> <header> <h1>TV SHOW SEARCH</h1> </header> <form autocomplete="off" id="search-form"> <input type="text" placeholder="TV Show Title" name="query"> <button id="search-btn">Search</button> </form> <div class="container align-items-center" id="container"> </div> <script src="./TV_ShowSearch.js"></script> </body> </html>

How do I make this responsive for mobile view? and also provide spacing for tv show div

Question

2 answers

solution1
0 2021-03-31 10:56:55

solution2
0

How do I make this responsive for mobile view? and also provide spacing for tv show div

Question

2 answers

solution1 0 2021-03-31 10:56:55

solution2 0

solution1
0 2021-03-31 10:56:55

solution2
0