1

Estou com problemas para deixar uma section responsive no 100% ela fica assim: inserir a descrição da imagem aqui

Quando diminui o zoom da pagina ela fica assim: inserir a descrição da imagem aqui

Código:

.fundoserv
{
	display: block;
	overflow: hidden;
	background-position: top center;
	background-color: #F0F0F0;
	width:auto;
	min-height: 800px;
    background-repeat: no-repeat;	
	color: #dad9d9;
	background-attachment: fixed;
	background-size: cover;
}
.fundoserv h2
{
height: 100px;
color: #305e78;
font-family: 'Cuprum', sans-serif;
font-weight: 700;
	margin-top: 30px;
font-size: 48px;
text-align: center;
}
.fundoserv h1
{
color: #000000;
font-family: 'Cuprum', sans-serif;
font-weight: 700;
margin-top: 100px;
font-size: 80px;
text-align: center;
}

.fundoserv img{
	margin-left: 850px;
	margin-top:-400px;
} // essa parte principalmente.


.ud_active {
	background:#FFFFFF; 
	padding:1% 0 1% 2%;}

dt { 
	transition:all 300ms;
	-webkit-transition:all 300ms;}

dt, dd { 
	
	width: 500px;
	padding:1%; 
	margin-left: 180px;
}
dt { 
	font-family: 'Oswald', sans-serif; 
	background:	#0B6383; 
	color:	#59B4DB; 
	font-size: 25px;
	text-transform:uppercase; 
	border-top:1px solid #FFFFFF;
	cursor:pointer; 
}
dt:first-child { 
	border-top:none;
}
dt:hover { 
	background:#0FECFF;
}
dd { font-family: 'Lato', sans-serif; 
	background:#333; 
	line-height:20px; 
	font-size:14px; 
	word-spacing:3px; 
	color:#999; 
	display:none;
}
				<section class="services">
			
        <div class="fundoserv">
			
					<h1>Secure Job</h1>
			<h2>Services</h2>
	<article>
    <dl id="ud_accordion">
      <dt>VITORIAS</dt>
      <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
      <dt>MELHOR DE 10 (MD10)</dt>
      <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
          <dt>ELO BOOSTING</dt>
      <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
      <dt>DUO BOOSTING</dt>
      <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
          <dt>ELO BOOSTING (PREMIUM)</dt>
      <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
      <dt>SECURE BOOSTING(EXCLUSIVE)</dt>
      <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
    </dl>
</article>
 <img src="img/logo.png" alt="faq">
        </div>
	</section>	

7
  • Felipe achei melhor remover minha pergunta, pois ela não respondia completamente a sua pergunta. Te aconselho a ler esse excelente artigo sobre o que é DL/DT/DD e vc vai ver que não é a melhor opção para criar um Menu, ou um Collapse. maujor.com/blog/2006/04/26/dl-lists
    – hugocsl
    Commented 3/01/2018 às 11:27
  • eu tinha pego um collapse já pronto, mas você tem algo em relação aquela Light q vc falou?
    – Felipe
    Commented 3/01/2018 às 12:30
  • Felipe o sistema chama FlexBox tem diversos tutoriais no youtube. São classes CSS para organizar o layout, vai te ajudar muito com a estrutura da página
    – hugocsl
    Commented 3/01/2018 às 12:33
  • opa vou dar uma procurada obrigado! se quiser comentar eu dou voto nele.
    – Felipe
    Commented 3/01/2018 às 12:35
  • 1
    Tranquilo Felipe só leve em consideração que o Zoom do Browser não é a ferramenta ideal para testar se o site é Responsivo. Para isso use a Developer Tool do Chrome. E tente fazer as coisas na mão, as coisas que vemos prontas nem sempre são as melhores opções pro nosso projeto. []´s
    – hugocsl
    Commented 3/01/2018 às 12:37

1 Resposta 1

1

Cara o Browser não costuma dar "zoom" em valores fixos como em PX por exemplo. O ideal pro seu site ficar Responsivo no Zoom do Browser é vc usar todos os valores em % ou Vw/Vh

OBS: Apesar disso aconselho usar @media screen and () {} para fazer ajustes finos para o zoom no Browser. E pense em usar Medidas em REM, EM, VW/VH e %, evite PX.

4
  • Então eu posso refazer toda minha section com utilizando esse testfundo q vc criou como o bg da section e tals e utilizar tudo em % ou em?
    – Felipe
    Commented 3/01/2018 às 10:20
  • E utilizaria um postion:Relative naquela div e position absolute em todas outras para ficar dentro dela ou não?
    – Felipe
    Commented 3/01/2018 às 10:22
  • Felipe pelo que entendi da sua pergunta o seu problema era que ao dar o Zoom com o Browser o Menu Azul ficava pequeno. Mas estou vendo que o seu maior problema seria com o alinhamento dos itens mesmo. Nesse caso seria melhor usar Flexbox e tamanhos em % para não dar problema no Zoom.
    – hugocsl
    Commented 3/01/2018 às 10:48
  • simm também você poderia me mandar um exemplo de flexbox?
    – Felipe
    Commented 3/01/2018 às 10:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .