Problem leaving a Responsive service

Asked

Viewed 71 times

1

I’m having trouble letting a 100% Responsive Section get like this: inserir a descrição da imagem aqui

When you zoom in on the page, it goes like this: inserir a descrição da imagem aqui

Code:

.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>

html css

  • Felipe thought it best to remove my question, because it did not completely answer your question. I advise you to read this excellent article about what is DL/DT/DD and you will see that it is not the best option to create a Menu, or a Collapse. http://www.maujor.com/blog/2006/04/26/dl-lists/

  • I had taken a ready-made Collapse, but you got something on that Light you said?

  • Felipe the system calls Flexbox has several tutorials on youtube. Are CSS classes to organize the layout, will help you a lot with the page structure

  • opa vou dar uma procurada obrigado! if you want to comment I vote for him.

  • 1

    Tranquil Felipe just take into consideration that Browser Zoom is not the ideal tool to test if the site is Responsive. For this use the Chrome Developer Tool. And try to do things by hand, the things we see ready are not always the best options for our project. []s

  • I edited the answer just with the Zoom part in the Browser

  • vlw bro I’ll do it.

Show 2 more comments

1 answer

1


Face the Browser does not usually "zoom" in fixed values as in PX for example. Ideal for your website to be Responsive in Browser Zoom is to use all values in % or Vw/Vh

OBS: Despite that I advise to use @media screen and () {} to make fine adjustments to the zoom in the Browser. And think about using Measures in REM, EM, VW/VH and %, avoid PX.

  • Then I can redo all my Ction with using this testfundo q vc created as the bg of the Section and tals and use everything in % or?

  • And would use a postion:Relative in that div and position Absolute in all others to stay inside it or not?

  • Felipe from what I understood of his question his problem was that when giving the Zoom with the Browser the Blue Menu became small. But I can see that your biggest problem would be with the alignment of the same items. In this case it would be better to use Flexbox and sizes in % to not give problem in Zoom.

  • Also you could send me an example of flexbox?

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.