How do I make my current code responsive?

Question

Question: I would like to make my current code responsive so that it works for everyone such as mobile, tablets etc.. That is basically all I want to accomplish. The reason I want to make it responsive is so that it fits all of the different screen sizes for multiple devices. Additionally I wanted to know if there are any improvements that I could make to my code to increase efficiency or professionality.

function logOptions() {
  var s = document.getElementsByName('Interests')[0];
  var text = s.options[s.selectedIndex].text;
  console.log(text);
}

function logEmail() {
  console.log(document.getElementById('email').value);
}

function myFunction() {
  logOptions();
  logEmail();
}

document.getElementById('inputform').addEventListener('submit', function(e) {
  // e.preventDefault(); add this to log the email and select menu values to the browser console
  logOptions();
  logEmail();
});

/* styling for main body of webpage */

body {
  background-color: #000639
}


/* styling for h2 */

h2 {
  color: #FFFFFF;
  font-size: 24px;
  font-family: Helvetica;
  position: fixed;
  left: 350px;
}


/* styling for h4 */

h4 {
  color: #FFFFFF;
  font-size: 20px;
  font-family: Helvetica;
  font-weight: lighter;
  left: 350px;
  position: fixed;
  bottom: 445px;
}


/* styling for input field button */

input[type=email] {
  font-size: 16px;
  border-radius: 7px;
  width: 315px;
  height: 45px;
  font-family: Helvetica;
  font-weight: lighter;
  position: fixed;
  left: 350px;
  bottom: 400px;
}


/* styling for sign up now submit button */

button {
  background-color: #5c6ac4;
  position: fixed;
  left: 351px;
  bottom: 320px;
  width: 540px;
  height: 55px;
  border-radius: 7px;
  font-family: Helvetica;
  font-size: 16px;
  color: #FFFFFF;
  font-weight: bold;
}


/* styling for option menu */

select {
  font-size: 16px;
  width: 200px;
  height: 50px;
  font-family: Helvetica;
  font-weight: lighter;
  margin-left: 340px;
  color: #7B7B7B;
  position: fixed;
  bottom: 400px;
}


/* styling for form */

form {
  position: fixed;
  left: 350px;
  bottom: 420px;
}


/* styling for rectangle */

svg {
  position: fixed;
  bottom: 440px;
  right: 628px;
}


/* styling for email placeholder */

input::placeholder {
  color: #7B7B7B;
}

#thanks {
  font-family: Helvetica;
  font-weight: bold;
  position: fixed;
  bottom: 470px;
}

#tips {
  font-family: Helvetica;
  position: fixed;
  bottom: 430px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Shopify Frontend Developer Intern</title>
  <link rel="stylesheet" type="text/css" href="web.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
  <h4>Subscribe for free marketing tips</h4>

  <!-- <div class="input form"> -->
  <form id="inputform" method="get" action="confirmation.html">
    <input id="email" type="email" placeholder="Email Address" required>
    <button type="submit" id="validate">Sign up now</button>
    <select name="Interests" required>
      <option value="" disabled selected>Interested in..</option>
      <option value="option1">Marketing</option>
      <option value="option2">Option2</option>
      <option value="option3">Option3</option>
      <option value="option4">Option4</option>
    </select>
  </form>

  <svg>
  <rect width="40" height="3" style="fill:lightgreen" />
  </svg>

</body>

</html>

To make it responsive, don't use ```position: fixed```. Use media queries and relative positioning — Jonathan Rys, May 09 '18 at 23:15

Delalie Rawllings · Answer 1 · 2018-05-09T23:34:20.913

making your code responsive will mean you will need to have some knowledge of css. To do this you could use media queries, for example

@media only screen and (max-width: 320px){
}

The code above means when the screens maximum width is 320px all your css code in the media query will be the active css code for your website. so you could do something like this to your css code:

body {
  background-color: #000639
}

/* styling for h2 */

h2 {
  color: #FFFFFF;
  font-size:24px;
  font-family: Helvetica;
  position: fixed;
  left: 350px;
}
@media only screen and (max-width: 320px){
/* styling for h2 */
        h2 {
      color: #FFFFFF;
      font-size:24px;
      font-family: Helvetica;
      position: fixed;
      left: 350px;
    }
   }

So you will have to edit the css code for h2 under the media query to make sure each time the screen size reduces to that size all elements will auto adjust to fit the screen as you will design. For more information about media queries visit Learn responsive design at https://www.codecademy.com here, you will find a course on responsive design i think that will give some insight.

score 0 · Answer 2 · answered May 09 '18 at 23:16

0

If you want to fix any type of screen resolution, don't use px, use % instead. I have learned how to create a website but forgot some of them.

answered May 09 '18 at 23:16

Sam

3
3

Emeeus · Answer 3 · 2018-05-09T23:59:46.753

Your question is difficult to answer since there are different points of view.

You could build responsive css and html manually and learn a lot of things. It is the best solution. You need to know media queries for example, and a huge amount of tricks.
You could use a framework that solve most important things, its a lazy solution. My advice is to use bootstrap but could be any other. I choose this because it's easy. Read the documentation and learn deeply how the grid system works. With this you'll be able to solve most common responsive problems.
If you don't want to learn anything, just think your code vertically, one column if possible, avoid fixing widths, etc. It's not impossible.

How do I make my current code responsive?

3 Answers3