How to make a floating page div responsive

Question

Hi I'm still new to web development. So I have a register page that floats as a div above the main page but I was wondering how do I ensure that the div gets centered in a responsive manner?

The pages are separated and included at the header.

<?php 
include ('includes/login.php');
include ('includes/register.php');
?>

my register's css

#regScreen {
    padding: 5 5 40px 5px;
    margin: 0 auto;
    position: fixed;
    top: 5%;
    left: 33%;
    z-index: 10;
    display: none;
    background: #ebebeb;
}

#regScreen:target, #regScreen:target+#cover {
    display: block;
    opacity: 2;
}

#reghead {
    background-color: #e2e1e1;
    text-align: center;
    display: block;
    padding: 0px 0px 10px 0px;
}

I tried to use media query on my #regscreen:

@media (max-width: 300px) {
  #regScreen {width: 100%;
  left:0%;
}
}

But using media queries doesn't seems to recognize the page as responsive as it is already small. From my understanding, please correct me if I'm wrong.

Answer 1

i already see one error just by looking

@media and (max-width: 300px) {
#regScreen {
 width: 100%;
 left:0%;
}
}

you for got 'and' before '(max-width: 300px)'

Answer 2

I'm not sure about what is the element using those selectors, but I tried to make a sample html & css reference for solving your issue. Here is the link jsfiddle.net/3Le34w8p/

Answer 3

It's difficult to provide an exact answer without more infomation ( it would be great if you added more of the HTML markup ), however...

If the issue is that the floating div does not resize to fit various screen sizes (and since you're new to web development...welcome aboard!), there are a couple of suggestions I can make:

1) You may be overcomplicating it by trying to apply the @media (max-width:300px) media query. By simply adding the following styles, the registration form should resize accurately:

#regScreen {

  /* The rest of your styles go here */

  width:90%;
  max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */

}

This would ensure that the width of the form is always either 90% of the screen width OR 600px, whichever is smaller .

2) If you think there may be an issue with the media query not trigerring, an easy way to test it is to make something really obvious happen at that breakpoint...for example:

@media (max-width: 300px) {

  /* Test Style */
  /* Turn background red when below 300px */
  body{
    background-color:red !important;
  }

  /* Your original styles */
  #regScreen {
    width: 100%;
    left:0%;
  }

}

By doing this, it should allow you to start troubleshooting whether it's your media query syntax or something else that is the issue; maybe the media query styles are being correctly applied (so your media query syntax is ok) but the new styles are being overwritten later in the CSS (or due to the specificity of certain rules).

If you add more info to your question, let me know and I'll take another look but until then, this should hopefully help get you on the right track.