Search code examples
htmlcssmedia-queriesresponsive

Making a website responsive for all screen sizes

I'm trying to make my website responsive without Bootstrap but when I use the @Media query tag it doesn't work - nothing changes.

.........................................................................

This is my code:

body {
  font-family: "Oswald",Helvetica,Arial,sans-serif;
  /* font-family: 'Roboto', sans-serif; */
  /* overflow-y: hidden; */
  /* background-image: url("https://preview.redd.it/qmfjuz883g7z.png?width=1024&s=c5e92c9c5e20b147ef13daf77eab47dae203496f"); */
  background-color: #e5e5e5;
  /* background-color: #222831; */
  margin: 0px;
}
html {
  scroll-behavior: smooth;
}

h1 {
    margin: 0;
}

.Terms:hover {
  font-weight: bold;
  text-decoration: underline;
}

.Terms {
  text-decoration: none;
  color: white;
}

.SmallGamesLogoWhite:hover {
  transform: scale(1.1);
}

.SocialMedia {
  margin-top: 85px !important;
  height: 60px !important;
}

.Company_Text_Info {
  color: #fafafa;
  width: 500px;
  margin-top: 30px;
  margin-left: 20px;
}

.EmailIcon_Link:hover {
  text-decoration: underline;
  font-weight: bold;
}

.EmailIcon_Link {
  margin-left: 20px;
  color: #fafafa;
  text-decoration: none;
}

.EmailIcon_Image {
  margin-top: 10px;
  margin-left: 20px;
  height: 20px;
}

.SmallGamesLogoWhite {
  margin-top: 30px;
  margin-left: 20px;
  /* margin-right: 150px; */
  height: 35px;
}

#footer {
  background-color: #393e46;
  height: 400px;
}


#logo {
  padding: 20px 20px;
  top:0;
  left:0;
}


.SmallGameStudio_footer {
  margin-top: 350px;
}

#video-content {
  margin-top: 100px;
  margin-bottom: 100px;
}

.video_h1 {
  margin-top: 100px;
}

.video_p {
  font-size: 15px;
  width: 450px;
  text-transform: uppercase;
}

.CenteredText{
  margin-top: 35px;
  color: white;
}

/* .CenteredText_Span{
  color: white;
  font-weight: bold;
} */

.NavbarLinks_Video{
  margin-right: 450px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px 25px;
  text-decoration: none;
  word-spacing: 30px;
  font-size: 25px;
  color: black !important;
}

::-moz-selection { /* Code for Firefox */
  color: white;
  background: #ffe4e4;
}

::selection {
  color: white;
  background: #ffe4e4;
}

.NavbarLinks_Games{
  margin-right: 635px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px 25px;
  text-decoration: none;
  word-spacing: 30px;
  font-size: 25px;
  color: black !important;
}

#LearnMore {
    margin-top: 150px;
    margin-bottom: 300px;
    color: white;
}

.games_image:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#games {
  background-color: #393b44;
  margin: 0;
}

.games_content_fig_desc {
  color: white !important;
  width: 250px;
  margin-top: 15px;
}

.games_content {
  display: flex;
  flex-wrap:wrap;
}

.games_content_fig {
  margin-left: 55px;
  color: black;
  color: #ffec00;
}

.download_button:hover {
  transform: scale(1.1);
}

.download_button {
  background-color: #ff7171; /* Default Website Color Scheme */
  margin: 25px 55px;
  border: none;
  color: white;
  padding: 15px 32px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}

.games_image {
  height: 200px;
  margin: 25px 25px;
  margin-bottom: 25px;
  border-radius: 50px;
}

@media (max-width: 980px) {
.games_image {
  height: 200px;
  margin: 25px 25px;
  margin-bottom: 25px;
  border-radius: 50px;
  }
}

#background_grass {
  background-image: url("https://preview.redd.it/qmfjuz883g7z.png?width=1024&s=c5e92c9c5e20b147ef13daf77eab47dae203496f");
  /* margin-top: 45px;
   padding: 5px; */
  height: 750px;
}

#LearnMore:hover{
    color: white;
}

.Copyright_Text {
  margin-bottom: 5px;
  color: white;
}
.LearnButton:hover {
  color: white;
  background-color: #d9adad;
}

.LearnButton {
  width: 150px;
}

.FooterLinks:hover {
  font-weight: bold;
  text-decoration: underline;
}

#FooterLinks {
    word-spacing: 30px;
    font-size: 35px;
    padding-top: 50px;
}

.FooterLinks {
  color: white;
  text-decoration: none;
}

.NavbarLinks_Home{
  margin-right: 800px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px 25px;
  text-decoration: none;
  word-spacing: 30px;
  font-size: 25px;
  color: black !important;
}

.NavbarLinks_Contact {
  margin-right: 300px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px 25px;
  text-decoration: none;
  word-spacing: 30px;
  font-size: 25px;
  color: black !important;
}

.LearnMore_Social {
  margin-right: 600px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px 25px;
  text-decoration: none;
  word-spacing: 30px;
  font-size: 25px;
  color: black !important;
}

.ArrowUpIcon {
  height: 45px;
}

.LearnMore_P {
  font-size: 20px;
  width: 500px;
}

.LearnMore_Desc:hover {
  background-color: #d9adad; /* Default Website Hover Color Scheme*/
}

.LearnMore_H1 {
  font-size: 35px;
}

.LearnMore_Desc {
  background-color: #ff7171; /* Default Website Color Scheme */
  margin-top: 25px;
  margin-right: 50px;
  border: none;
  color: white;
  padding: 10px 20px;  /* Default Padding was 15px 32px;*/
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  font-size: 16px;
}

.NavbarLinks_Home:hover{
  color: white !important;
  height: 53px;
  background-color: black;
  font-weight: bold;
  text-decoration: underline;
}

.NavbarLinks_Contact:hover{
  color: white !important;
  height: 53px;
  background-color: black;
  font-weight: bold;
  text-decoration: underline;
}

.NavbarLinks_Games:hover{
  color: white !important;
  height: 53px;
  background-color: black;
  font-weight: bold;
  text-decoration: underline;
}

.NavbarLinks_Video:hover{
  color: white !important;
  height: 53px;
  background-color: black;
  font-weight: bold;
  text-decoration: underline;
}

.GooglePlay_Icon {
  /* margin-right: 600px; */
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px 25px;
  word-spacing: 30px;
  font-size: 45px;
  height: 45px;
}

.itch_image:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.itch_image {
  height: 50px;
  border-radius:35px;
  margin-top: 10px;
  margin-left: 20px;
}

.googleplay_image:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.QuickLinks_Links:hover {
  transform: scale(1.1);
}

.QuickLinks_Links {
  color: #fafafa;
  font-size: 25px;
  position: absolute;
  top: 0;
  right: 0;
  text-decoration: none;
}

.QuickLinks {
  margin-top: 85px;
  margin-right: 550px;
}

.subscribe {
  margin-top: 85px;
  position: absolute;
  top: 0;
  right: 0;
}

input[type=text], select {
  width: 75%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.subscribe_h1 {
  margin-bottom: 20px;
  color: #fafafa;
}

.subscribe_button:hover {
  transform: scale(1.1);
}

.subscribe_button {
    margin-right: 65;
    background-color: #ff7171;
    border: none;
    color: white;
    padding: 15px 20px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block !important;
    border-radius: 5px;
    font-size: 16px;
}

.QuickLinks_Contant {
  margin-top: 130px;
  margin-right: 535px;
}

.QuickLinks_Games {
  margin-top: 175px;
  margin-right: 542px;
}

.QuickLinks_Videos {
  margin-top: 220px;
  margin-right: 542px;
}

.QuickLinks_Terms {
  margin-top: 265px;
  margin-right: 430px;
}

.copyright_message {
  padding-top: 3px;
  color: #fafafa;
}

.Privacy:hover {
  text-decoration: underline;
  font-weight: bold;
}


.Privacy {
  color: #fafafa;
  text-decoration: none;
}

.message_development {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 200px;
  margin-right: 100px;
  width: 500px;
  color: white;
}

.subscribe {
  margin-right: 150px;
  margin-top: 300px;
  position: absolute;
  top: 0;
  right: 0;
}

#copyright {
  height: 65px;
  background-color: #455d7a;
}

.QuickLinks_h1 {
  margin-bottom: 100px;
  /* position: absolute;
  bottom: 0;
  right: 0; */
  color: white;
}

.Logo_Header {
  margin-top: 200px;
}

.googleplay_image {
  height: 50px;
  margin-top: 10px;
  margin-left: 30px;
}

/* .Itch_Footer_Icon {
  margin-right: 600px; */
  /* margin-bottom: 20px;
  margin-top: 150px;
  border-radius: 75px;
  padding: 25px 25px;
  font-size: 45px;
  height: 45px;
} */

.GooglePlay_Footer_Icon:hover {
  transform: scale(1.1);
}

.GooglePlay_Footer_Icon {
  /* margin-right: 600px; */
  /* margin-bottom: 20px; */
  margin-top: 50px;
  padding: 25px 15px;
  font-size: 45px;
  height: 45px;
}

/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
.SmallGamesLogo:hover {
  transform: scale(1.1);
}

.GooglePlay_Icon:hover {
  transform: scale(1.5);

}

.Itch_io_Icon:hover {
  transform: scale(1.5);
}

.Itch_io_Icon {
  margin-right: 150px;
  /* margin-right: 600px; */
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px 25px;
  font-size: 45px;
  border-radius: 75px;
  height: 45px;
}

#container {
  width: 100%;
  max-width: 1100%;
}

#Navbar {
  /* position: fixed;
  top: 0;
  left: 0; */
  width: 100%;
  background-color: white !important;
}
.LearnButton {
  background-color: #ff7171; /* Default Website Color Scheme */
  margin-top: 25px;
  border: none;
  color: white;
  padding: 15px 32px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  font-size: 16px;
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: white;
  color: #ff5757;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  color: white !important;
  background-color: #ff5757;
}

./* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  #background_grass, #Navbar, #logo, #NavLinks {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

/* Footer Wavy CSS */
<!DOCTYPE html>
<html>
  <head>
      <!-- Font Awesome -->
        <script src="https://kit.fontawesome.com/a779d142a2.js" crossorigin="anonymous"></script>

    <!-- StyleSheet -->
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/games.css">
    <link rel="shortcut icon" type="image/png" href="img/favicon_platformergame.png"/>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
    <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"> -->

    <!-- <meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmallGamesStudios</title>
  </head>
  <body>

        <div id="container">
        <div id="Navbar">
        <div id="logo">
          <!-- Make image (Logo) black -->
          <a href="index.html"><img class="SmallGamesLogo" src="img/SmallGamesLogo.png" alt="SmallGamesStudios"/></a>
            </div>
          <div id="NavLinks">
            <div class="Navbar_Links">
              <a class="NavbarLinks_Contact" href="contact.html">Contact</a>
              <a class="NavbarLinks_Games" href="games.html">Games</a>
              <a class="NavbarLinks_Video" href="videos.html">Video</a>
              <a class="NavbarLinks_Home" href="index.html">Home</a>
            </div>
            <div class="Navbar_Social">
              <a href="#"><img class="GooglePlay_Icon" src="img/GooglePlay.png" alt="Google Play Icon"/></a>
              <a href="https://smallgamesstudios.itch.io/platformergame" target="_blank"><img class="Itch_io_Icon" src="img/itch.io.png" alt="Itch.io Icon"/></a>
              <!-- <a href="#"><img class="Youtube_Icon" src="img/YoutubeLogo.png" alt="Youtube_Icon"/></a> -->
              <!-- <a class="NavSocial_Itch" href="#"><i class="fab fa-itch-io"></i></a>
              <a class="NavSocial_GooglePlay" href="#"><i class="fab fa-google-play"></i></a> -->
            </div>
          </div>

          <div id="games">
            <div class="games_content">
              <div class="PlatformerGame">
                <figure>
                <a href="https://smallgamesstudios.itch.io/platformergame" target="_blank"><img class="games_image" src="img/PlatformerGame.png" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">Platformer Game</figcaption></a>
                <figcaption class="games_content_fig games_content_fig_desc">We just launched our first, new game! Try avoid dieing from enemies and falling! Collect coins to win, keep your score and try and win! This game is Only for Computers and PCs. Make sure to extract the file and run the exe file!</figcaption>
                <a href="games/PlatformerGame.zip"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="message">
                <h2 class="message_development">We are currently in development making new games! Make sure you subscribe to our Newsletter to get a notification!</h2>
                <div class="subscribe">
                  <form action="https://formspree.io/maypgwbg" method="post">
                    <input class="subscribe-input" placeholder="Your Email" type="text" name="_replyto"/>
                      <button class="subscribe_button" type="submit">Send</button>
                  </form>
                </div>
              </div>
              <!-- <div class="angry_birds">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_match">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds-friends">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_evolution">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_blast">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div> -->
            </div>
          </div>

      <button onclick="topFunction()" id="myBtn" title="Go to top"><img class="ArrowUpIcon" src="img/ArrowUpIcon.png" alt=""></button>


      <div id="footer">
        <!-- <div class="SocialMedia_Footer"> -->
        <div id="SmallGamesLogoWhite Company_Info SocialFooter_Links">
          <a href="index.html"><img class="SmallGamesLogoWhite" src="img/SmallGamesLogoWhite.png" alt="SmallGamesStudiosFooter"/></a>
          <p class="Company_Text_Info">
            SmallGameStudios is a small mobile and PC/Laptop gaming company. Founded in 2020, SmallGameStudios has released some games. Several fun games. We are here to do the best work to entertain people worldwide and make games that we want to show to our friends. Join us on this new journey and lets connect the world through amazing games made with pride and passion.
          </p>
          <p class="Email"><img class="EmailIcon_Image" src="img/Email_Icon.png" alt="Email_Icon"><a class="EmailIcon_Link" href="contact.html">[email protected]</a></p>
          <a href="https://smallgamesstudios.itch.io/platformergame" target="_blank"><img class="itch_image" src="img/itch.io.png" alt="itch.io-logo"></a>
          <a href="#"><img class="googleplay_image" src="img/GooglePlay.png" alt="GooglePlay-icon"></a>
        </div>
        <!-- <div id="QuickLinks">
          <center>
            <h1 class="QuickLinks_h1">Quick Links</h1>
            <a class="QuickLinks QuickLinks_Links" href="#">Home</a>
            <a class="QuickLinks_Contant QuickLinks_Links" href="contact.html">Contact</a>
            <a class="QuickLinks_Games QuickLinks_Links" href="games.html">Games</a>
            <a class="QuickLinks_Videos QuickLinks_Links" href="videos.html">Videos</a>
            <a class="QuickLinks_Terms QuickLinks_Links" href="terms.html">Terms & Conditions</a>
          </center>
        </div> -->
        <center>
        <div id="copyright">
          <div class="copyright_message">
            <p class="copyright_message_text">© 2009 - 2020 SmallGameStudios. All rights Reserved. <a class="Privacy" href="#">Privacy policy</a>.</p>
          </div>
        </div>
        </center>
        <!-- <div>
          <h1 class="Newsletter_h1">Join Our Newsletter</h1>
          <form action="https://formspree.io/maypgwbg" method="POST">
          <input class="" placeholder="Your Email" type="text" name="_replyto">
            <button class="" type="submit">Send</button>
        </form>
        </div> -->
          </div>
        </div>

    </body>

        <!-- Script Section  -->


        <script>
      //Get the button
      var mybutton = document.getElementById("myBtn");

      // When the user scrolls down 20px from the top of the document, show the button
      window.onscroll = function() {scrollFunction()};

      function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          mybutton.style.display = "block";
        } else {
          mybutton.style.display = "none";
        }
      }

      // When the user clicks on the button, scroll to the top of the document
      function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }


      </script>

  </body>
</html>

.......................................................................................

This is the code i added for @media:

 @media screen and (max-width:800px) {#background_grass, #Navbar, #logo, #NavLinks { width: 100%; } }

What am i doing wrong? I'm writing the @Media query wrong?

Solution

  • After a quick look at your code I'd recommend trying something like this:

    .games_image {
  height: 200px;
  margin: 25px 25px;
  margin-bottom: 25px;
  border-radius: 50px;
}

@media (max-width: 980px) {
.games_image {
  height: 200px;
  margin: 25px 25px;
  margin-bottom: 25px;
  border-radius: 50px;
}
}

    Also I'd maybe include this:

    * {
 width: 100%;
 padding: 0;
 margin: 0;
}

    There's no quick way to use media queries and make it responsive but wrapping media queries below and making adjustments to the individual parts can work really well and allow you to have the finish that you want.