Ola estou tentando deixar essa tela de login responsiva so que estou falhando miseravelmente alguma boa alma poderia me ajudar 
esse é o codigo:
<?xml version="1.0" encoding="UTF-8" ?> Login<meta name="theme-color" content="#009999" />
<link rel="shortcut icon"
href="#{resource['compracam/images/favicon.ico']}" type="image/x-icon" />
<link rel="icon" href="#{resource['compracam/images/favicon.ico']}"
type="image/x-icon" />
<style>
body {
background-image: url("#{resource[’/compracam/images/wallpaper.png’]}")
!important;
background-position: center;
/* Background image doesn’t tile <em>/
background-repeat: no-repeat;
/</em> Background image is fixed in the viewport so that it doesn’t move when
the content’s height is greater than the image’s height <em>/
background-attachment: fixed;
/</em> This is what makes the background image rescale based
on the container’s size */
background-size: cover;
}
</h:head>
<p:panelGrid id="Login" columns="4" cellpadding="0" layout="grid"
styleClass="ui-panelgrid-blank"
columnClasses="ui-grid-col-4, ui-grid-col-3, ui-grid-col-3, ui-grid-col-2" style="min-width:230px">
<p:panelGrid columns="1" >
</p:panelGrid>
<p:panelGrid columns="3" >
<p:outputLabel style="color:white;margin:-8px"
for="login-email" value="E-mail:" />
<p:inputText type="text" name="session_key" class="login-email"
tabindex="1" id="login-email" style="margin-right:77px"
placeholder="E-mail ou número de telefone"
autofocus="autofocus" />
</p:panelGrid>
<p:panelGrid columns="2">
<p:outputLabel style="color:white" for="login-password"
value="Senha:" />
<p:inputText type="password" name="session_password" style="margin-right:77px"
class="login-password" id="login-password" aria-required="true"
tabindex="1" placeholder="Senha" />
</p:panelGrid>
<p:panelGrid columns="4">
<p:commandButton style="width:135px" value="entrar"
action="#{loginBean.login}" />
</p:panelGrid>
</p:panelGrid>
</p:toolbarGroup>
<h:body styleClass=“loginBody”>
<f:metadata>
<f:viewParam name="dummy" />
<f:event listener="#{loginBean.preRender}" type="preRenderView" />
</f:metadata>
Cadrasto
<h:form id="frm" prependId="false">
<p:toolbarGroup align="left" style="width: 100%;">
<p:messages id="messages" autoUpdate="true" closable="true" />
<div class="ui-fluid">
<h:panelGrid columns="1" styleClass="grid-login" >
<h:graphicImage library="compracam"
name="images/logo com fundo transparente.png" style="width:300px" />
<p:outputLabel />
<p:outputLabel value="Nome" />
<p:inputText size="30" id="j_username" value="#{loginBean.email}" />
<p:outputLabel value="Sobrenome" />
<p:password size="30" id="j_password" />
<p:outputLabel value="E-mail" />
<p:password size="30" id="j_numero" />
<p:outputLabel value="número de telefone" />
<p:password size="30" id="numero" />
<p:outputLabel value="Senha (6 ou mais caracteres)" />
<p:password size="30" id="senha" />
<h:panelGroup />
<p:commandButton value="Cadraste-se agora"
action="#{loginBean.login}" ajax="false" />
</h:panelGrid>
</div>
</p:toolbarGroup>
</h:form>
</div>
</div>
</h:body>