0

I want to make a mobile responsive email squeeze page. Thus far I have the following code:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>

  <form action="/action_page.php" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin">
    <h2 class="w3-center">Dg Ebook</h2>

    <div class="w3-row w3-section">
      <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div>
      <div class="w3-rest">
        <input class="w3-input w3-border" name="email" type="text" placeholder="Enter Your Best Email">
      </div>
    </div>

    <button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding">Send me The FREE eBook on Email</button>

  </form>

</body>

</html>

This will make my page responsive but on desktop machines it will also scale the form to the edges of the screen. I want the desktop view to have the form in the middle of the screen at fixed width and when a mobile/tablet device views the page I want the form to be scaled to the edges of the screen.

How can I do that?

I use w3.css

Allar
  • 5
  • 2

1 Answers1

0

Use @media screen in your CSS.

@media screen and (max-width: 990px) /* For screen below 990px */
     CSS here...
@media screen and (max-width: 1200px) /* For screen below 1200px */
     CSS here...



@media screen and (min/max size) /* @media(CSS rule) screen(Media Type) and(&) */

Reason for @media is to define your CSS styles to match up with screen sizes. Hence, making it responsive. Learn more here: @media You might will need to override some w3.css rules.

MRestine
  • 133
  • 8