Tela de Login responsiva

Front-end
#1

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 /
background-repeat: no-repeat;
/ 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 /
background-attachment: fixed;
/ 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>

#2

Quando vi “Cadrasto” uma vez, achei que era erro de digitação, mas depois vi também em vários outros lugares. Por favor, “Cadastro” e não “Cadrasto”

Já tentou colocar dentro de uma div class=“ui-fluid”?

http://www.primefaces.org/showcase/ui/misc/responsive.xhtml

#3

Sim sim se ler o código vai ver que eu ja fiz isso e não adiantou

#4

Mas tente envolver tudo dentro da div, nao apenas a grid