What is the best approach to ensure mobile responsiveness and properly space the TV show div?

Question

What is the best approach to ensure mobile responsiveness and properly space the TV show div?

How can I center the searched images of shows and add spacing below each image? The 12-column grid is not behaving properly and the images are aligned correctly on desktop but not on mobile. Any suggestions on how to fix this using CSS and Bootstrap? The grid seems to be malfunctioning. Can someone please assist me?

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60020f0f14131412011020554e504e504d0205140153">[email protected]</a>/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

javascript css bootstrap-4 responsive-design responsive

Answer 1

Answer №1

To implement responsive design, consider using the code snippet below within a media query in your CSS:

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

Answer 2

To implement responsive design, consider using the code snippet below within a media query in your CSS:

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

Answer 3

Answer №2

After experimenting with your CSS, I was able to achieve the following modifications:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4c41415a5d5a5c4f5e6e1b001e001e034c4b5a4f1d">[email protected]</a>/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>

Answer 4

After experimenting with your CSS, I was able to achieve the following modifications:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4c41415a5d5a5c4f5e6e1b001e001e034c4b5a4f1d">[email protected]</a>/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>

What is the best approach to ensure mobile responsiveness and properly space the TV show div?

Answer №1

Answer №2

Similar questions

send the value of a variable from a child component to its parent

Bootstrap: Altering grid column layout for medium and small/extra-small screens

To style a text box next to text within a paragraph in CSS, simply create an empty box

Send back alternate HTML content if the request is not made via AJAX

Finding the variance in the given situation is as simple as following these steps

How to Retrieve the Current div's ID in VueJS

Implementing method overrides in TypeScript class objects inherited from JavaScript function-based classes

Executing a cloud function in Firebase from an Angular-Ionic application by making an HTTP request

Display exclusively the provided value

Problem with the mobile site width due to viewport misalignment

Is there a method in Kalendae js that automatically triggers the closing of the calendar after a date has been selected?

Error encountered while using Google Translate with XMLHttpRequest (Missing 'Access-Control-Allow-Origin' header)

Modify session variable upon link click

Cannot find JS variable after loop has completed

How can I tally the frequency of characters in a given string using Javascript and output them as numerical values?

The server encountered an unexpected error while processing the request, possibly due to a

What is the best way to verify if a class attribute includes a specific class or not?

Manipulating a DOM element in Angular 2 to alter its class attribute

What is the best way to create a blurred effect on an image during loading, and then transition to a sharp image once it is fully loaded?

What to do when faced with an NPM issue: Resolving the error "Unable to assign properties to null (setting 'parent')"