Question 167419 in Html Question posted in
Some basic documentation can be found here.

i want to make my html,css and javascript project responsive

when I’m implementing bootstrap to my project, mobile view and the position of my divs moving very badly. Consider my code

table {
    border-collapse: collapse;
    margin: auto;

    position: absolute;
    width: 60%;
    height: 60%;
    table-layout: fixed;
  
  }

  td {
    /* width: 50px;
    height: 50px; */
    text-align: center;
    vertical-align: middle;
    font-size: 24px;
    font-weight: bold;
    border: 1px solid #fff;

    width: calc(100% / 8);
    height: calc(100% / 8);
  }

  th {
    font-family: 'Press Start 2P', cursive, "Arial", "sans-serif";
    width: 60px;
    height: 60px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #fff;
    color: #fff;
  }
  
  .k{
    background-color: #5f4419;
    opacity: 0.9;
  }
  
  #countDiv {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    border: 0.5rem solid darkcyan;
    padding: 1.5rem;
    border-radius: 1rem ;
    box-shadow: 0 0 0.625rem #006d82ff;
    /* font-family: Arial, sans-serif; */
    font-family: 'Press Start 2P', cursive, "Arial", "sans-serif";
    font-size: 1.125rem;
   
    
    background-color: #5f4419;
    color: #fff;
   
    border-style: inset;
    text-shadow: 3px 3px 0 #363434;
  }

  /* Set the container to fill the entire viewport */
.container {
    justify-content: center;
    display: flex;
    flex-direction: row;
    height: 100%;
    background-color: rgba(0, 109, 130, 1);
    z-index: 1;
    position: relative;
    /* Task : for mobile view relative and for web view absolute */
    width: 100%;
    max-width: auto;
    margin: 0 auto;

    background-size: cover;
   
  }
  
  /* Set the game section to take up 50% of the width */
  .game {
    flex: 1;
    height: 100%;
    /* border: 1px solid black; */

    justify-content: end;
 
    position: relative;
    width: 100%;
    max-width: 100%; /* adjust as needed */
    margin: auto;
    background-size: cover;
    
  }


.gameContainer {
    margin-left: 20%;
    margin-top: 21%;
    position: relative;
    width: 100%;
    padding-bottom: 80%; /* set to the same value as width to create a square */
    
    overflow: hidden;
    z-index: 1;
    position: relative;
}


.background-image {
    position: absolute;
   
    top: 0;
    left: 0;
    background-image: url('../images/TreassureIsland.png');
    background-repeat: no-repeat;
    background-size: cover; 
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  /* stepsAway text image */
  .text-layer {
    font-family: 'Press Start 2P', cursive, "Arial", "sans-serif";
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: rgb(255, 248, 246);
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  }

  
  /* Set the info section to take up 50% of the width */
  .info {
    flex: 1;
    height: 100%;
    /* border: 1px solid black; */
  }


  .hintContainer {
    position: relative;
    float: left;
    flex: 1;
    height: 100%;
    /* margin-left: 5rem; */
    margin-top: 5rem;
    /* margin-bottom: 5rem; */
    margin-left: 5rem;
    /* position: absolute; */
    /* padding-bottom: 80%; */
    width: 70%;
    z-index: 2;
  }
  
  .hint {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 0.2rem solid darkcyan;
    padding: 1.5rem;
    border-radius:1rem;
    box-shadow: 0 0 0.625rem #006d82ff;
    /* font-family: Arial, sans-serif; */
    font-family: 'Press Start 2P', cursive, "Arial", "sans-serif";
    font-size: 1.125rem;
   
    
    background-color: #006d82ff;
    color: #fff;
   
    border-style: inset;
    text-shadow: 3px 3px 0 #363434;
    
  }

  .rules {
    
  }

  
  #foundTreasure {
    text-align: center;
    margin-top: 1rem;
    /* margin-bottom: 150%; */
    background-color: #cca669;

    align-items: center;
    justify-content: flex-start;
    border: 0.3rem solid darkcyan;
   
    border-radius: 1rem;
    box-shadow: 0 0 0.625rem #006d82ff;
    
    font-family: 'Press Start 2P', cursive, "Arial", "sans-serif";
    border-style: inset;
    text-shadow: 3px 3px 0 #363434;

    color: #fff;
    
  }
  
  #stepsAway {
    font-weight: bold;
    margin: 0 0.3125rem;
   
  } 


/* #################################################################### */
  
  /* Set the layout for smaller screens */
  @media screen and (max-width: 1100px) {
    .container {
      flex-direction: column;
      width: 100vh;
      height: 100%;
      justify-content: center;
      

      
        /* 
        display: flex;
        flex-direction: row;
        background-color: rgba(0, 109, 130, 1);
        z-index: 1; */
        /* Remove position: relative and add min-height: 100vh */
        min-height: 170vh;
        max-width: 170%;
        /* Task : for mobile view relative and for web view absolute */
        /* width: 100%;
        max-width: auto;
        margin: 0 auto;
        background-size: cover; */
      
      

    }


    .game  {
      flex: 0 0 auto;
      height: 100%;
      width: 100%;
    }
    .info {
      flex: 0 0 auto;
      height: 150%;
      width: 110%;
    }

    .hint{
      font-size: 2rem;
    }
    #foundTreasure {
      font-size: 2rem;
    }

  }

  /* Media query for screens up to 768px wide */
@media screen and (max-width: 768px) {
    .container {
      max-width: 90%;
    }
  
    .game, .info {
      max-width: 90%;
    }
  }
  
  /* Media query for screens up to 576px wide */
  @media screen and (max-width: 576px) {
    .container {
      max-width: 100%;
      padding: 0 10px;
    }
  
    .game, .info {
      max-width: 100%;
      padding: 0 10px;
    }

    

  }


  /* button */
.play-again {
  font-family: 'Press Start 2P', cursive, "Arial", "sans-serif";
  border: none;
  background-color: white;
  color: #085d1b;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
  border: 1px solid grey;
  border-radius: 15px;
  margin-bottom: 2rem;
  box-shadow: 0 0 9px rgb(173, 173, 173);
}

.play-again:hover {
  background-color: #006d82ff;
  color: #fff;
  box-shadow: 0 0 3px darkcyan;
}

.play-again::before {
  content: "f01e";
  font-family: 'Press Start 2P', cursive, "Arial", "sans-serif";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  opacity: 0;
}

.play-again:hover::before {
  transform: translateY(-50%) rotate(360deg);
  opacity: 1;
}
<!DOCTYPE html>
<html>
  <head>
    <title>TreasureHunt</title>
    <!-- <meta name="viewport" content="width=device-width, user-scalable=no"> -->

    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->

      <!-- custom css link -->
      <link rel="stylesheet" href="./css/game_style.css">
      <!-- google font -->
      <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

  </head>
  <body>

    <div class="container">

      <div class="info">
       
        <div class="hintContainer">

          <div class="rules hint">
            
             <ul>
              <h3> Rules for Treasure Hunt</h3><br>
                <li>There is treasure hidden in one of the cells.</li><br>
                <li>You can pick any cell</li><br>
                <ul>
                  <li>if lucky, you land on the treasure.</li><br>
                  <li>if not, I'll tell you how far the treasure is away.</li>
                </ul><br>
                <li>The number in the square shows the number of steps to reach the treasure along the shortest path.</li><br>
                <li> You can move up,down,left or right.You can't move diagonally. </li><br>
                <h4> Can you find the hidden treasure?</h4>
             </ul>
             
          </div>

          <div  id="foundTreasure" style="display: none;" >
            <h3 >Yay, you Found the Treasure! <br><span><img src="./images/Treasure.png"  height='65' width='65' alt="treasure"></span> </h3>
          </div>

          <div class="hint" id="hint" style="display: none;">
            <h3>INSTRUCTION </h3>
            <p id="stepsAway" style="font-size: larger;"></p><br>
          </div>

          <div id="countDiv" style="display: none;"> 
            <p id="count"></p>
            <button class="play-again" onclick="window.location.href='../index.html'">Go Back</button>
            <button class="play-again" onclick="location.reload()">Play Again</button>
          </div>

        </div>
     </div>


      <div class="game">
        <div class="gameContainer">
         
          <table>
            <thead>
              <tr>
                <th class="k"></th>
                <th class="k">A</th>
                <th class="k">B</th>
                <th class="k">C</th>
                <th class="k">D</th>
                <th class="k">E</th>
                <th class="k">F</th>
                <th class="k">G</th>
                <th class="k">H</th>
                <th class="k"></th>
              </tr>
            </thead>
            <tbody>
              <script src="./js/game_logic.js"></script>
            </tbody>
            <tfoot>
              <tr>
                <th class="k"></th>
                <th class="k">A</th>
                <th class="k">B</th>
                <th class="k">C</th>
                <th class="k">D</th>
                <th class="k">E</th>
                <th class="k">F</th>
                <th class="k">G</th>
                <th class="k">H</th>
                <th class="k"></th>
              </tr>
            </tfoot>
          </table>
          
      </div>
      <div class="background-image"></div>
      </div>

    </div>



  </body>
</html>

I want to make it responsive but with or without bootstrap I couldn’t be able to do so
can anybody help me with my code and tell me how to achieve responsive code for this

Tags:

3

Answers


  1. 0

    You need to use CSS media queries to get a responsive website. I recommend searching online and reading up on them, but this might be a good start: https://css-tricks.com/a-complete-guide-to-css-media-queries/

    But, it’s pretty simple. Basically the best precise way is to design your page, be default to look how you want it to on the smallest screen you will need. And then as screens get larger you can change things to work better at those sizes.

    I see you are currently doing the opposite in your code though, you are styling the defaults to large screens and then adding media queries to override those as the screen gets smaller using @media screen and (max-width: 1100px)

    Here’s an example:

    /*Default styles for small screens*/

html, body {
  padding: 0;
  margin: 0;
}

#container {
  background: #CCC;
  height: 100vh;
  
  width: 100%;
  
}

@media screen and (min-width: 550px){
  /*Styles for screens that are 550px wide or larger*/
  
  #container {
    width: 500px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px){
  /*Styles for screens that are 768px wide or larger*/
  
  #container {
    width: 800px;
  }
}
    <div id="container"></div>

    You can test this by resizing your browser to different sizes to see how it changes.

    Login or Signup to reply.
  2. 0

    Bootstrap has responsive styling classes built into it, known as breakpoints, that use the 12 column layout to define how things look. This lets you change how different sections will look on different screen sizes. For example, you would use <div class="col-12 col-md-6 col-lg-4 col-xl-3">...</div> to have a div that is 100% width on tiny screens, 50% width on medium screens, etc.

    No need for media queries until you start doing really fancy stuff; these utility classes should cover most basic needs.

    Echoing the other answer by @FiniteLooper, design your website for mobile screens first, then size it up gradually to each breakpoint and see where you need to adjust the layout. It’s far easier to do mobile-up rather than desktop-down. Pro tip, iPhone screens (standard size, not plus/xl) are 375px wide, so I use the Inspect Element/Developer Tools in-window and resize it so that the webpage is exactly the width I want (see below):

    enter image description here

    Login or Signup to reply.
  3. 0

    you can make your page responsive you just need to use media queries to make the app responsive. Media queries are CSS rules that apply styles based on the characteristics of the device displaying the content, such as screen size, orientation, and resolution. By defining different styles for different devices, you can ensure that your app looks good on all devices

    I wrote an example for you check it :

        .container {
  `background-color: rgba(0, 109, 130, 1);`
 

     position: relative;

  

    width: 100%;

    }
    
    .game {
      background-color: #ffffff;
    }
    
    .hintContainer {
      background-color: #ffffff;
      margin-top: 1rem;
    }
    
    @media (min-width: 576px) {
      /* For screens wider than 576px */
      .game {
        margin-left: 20%;
        margin-top: 21%;
        width: 80%;
      }
    
      .hintContainer {
        margin-top: 5rem;
        margin-left: 0;
        padding-left: 2rem;
        width: 30%;
      }
    }
    
    @media (min-width: 992px) {
      /* For screens wider than 992px */
      .game {
        width: 60%;
      }
    
      .hintContainer {
        margin-top: 0;
        margin-left: 5rem;
        padding-left: 5rem;
        width: 35%;
      }
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search