Error of responsiveness

Asked

Viewed 131 times

0

I’m following a material from Caelum and I’m having difficulty making a responsive page.Correto

I wish she’d stay like this, but she’s showing up like this

inserir a descrição da imagem aqui

.container{
  width: 96%;
}
header h1{
  text-align: center;
}
header h1 img{
  max-width: 50%;
}
.sacola{
  display: none;
}
.menu-opcoes{
  position: static;
  text-align: center;
}
.menu-opcoes ul li{
  display: inline-block;
  margin: 5px;
}
  <head>
    <meta charset="UTF-8">
    <title>Sobre a Mirror Fashion</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/sobre.css">
    <link rel="stylesheet" href="css/sobre-mobile.css" media="(max-width: 939px)">
  </head>
  <body>
    <header class="container">
      <h1><img src="img/logo.png" alt="Mirror Fashion"></h1>
      <p class="sacola">Nenhum item na sacola de compras</p>
      <nav class="menu-opcoes">
        <ul>
          <li><a href="#">Sua Conta</a></li>
          <li><a href="#">Lista de Desejos</a></li>
          <li><a href="#">Cartão Fidelidade</a></li>
          <li><a href="#">Sobre</a></li>
          <li><a href="#">Ajuda</a></li>
        </ul>
      </nav>
    </header>

html css mobile

  • You wanted to align the content div in the center of the page?

  • this, I created two pages with the same header, the other page worked, but this did not, when I will inspect in google Chrome, I do not know how to explain this white area

  • You can edit the question and put your html and css code?

  • See if you put this here resolve: . container{ width: 96%; margin: 0 auto; }

  • Unfortunately not

  • What a pity, but keep the margin: 0 auto; because he is responsible for leaving the content in the center of the page. Add the following css and see if you solve: html, body { width: 100%; margin: 0; padding: 0; }

  • reset could influence? I tried this your last tip and it didn’t work

  • I don’t understand what you mean by reset. If you mean clearing some float, try to do this: . container:after { clear: Both; }

  • in this project I created two html files and the two have the same header, in the index.html file the header resposivity worked, already in the other page not, is with this problem, the only difference in the header of this two files is the reset that I put in the index file

  • Unfortunately I think that only by running your project here on my machine I could identify the problem. If it’s no problem for you, send your project to me by email and I’ll analyze it better, otherwise, if you have how to put it on the air by and pass me the link, also da para eu ver.

  • can I send you the github link? Any problems?

  • can yes, no problem

  • https://github.com/Pakato14/projetoweb

  • Blz, I’ll take a look and tell you

  • Right! I’ll be waiting

  • Which page is even in trouble?

  • on.html, you can see when you inspect in mobile mode

  • Guy answered down here, I hope you understand. In case it helps, give an upvote on the answer to help. Thanks

Show 13 more comments

2 answers

0


Come on ... after seeing your code I found some problems.

In html, there is a meta tag viewport, this meta tag serves for the browser to understand which resolution it should take into consideration depending on the device. I advise putting so:

<meta name="viewport" content="width=device-width, initial-scale=1">

But it would be nice to take a look in this article to better understand about it.

Second problem. You’re setting fixed css sizes on some elements, for example .body and .container which have 940px, or #distribution center* who is at 550px.

So either you’d have to use css media queries to change these sizes according to the resolution (see this link) or put the size of these elements in percentage so that they adjust as the page decreases.

To sum up, your problem was the viewport along with an element that was very large in size, that is. This element made the page big, but not the top that had set percentage. It fit the viewport correctly, while the rest did not.

Well, I hope you understand.

  • It worked, thanks!!!! The link on css media queries did not open, but solved the problem here your tip.

  • I’m glad it worked out! I edited the link, but if you search on media queries you will find enough. Hug!

0

In his CSS put style to your tag: 

ul{
   margin:0; 
   padding:0;
}

This sets the outer and inner margin to zero and should eliminate whitespace.

I haven’t tested but it should solve.

  • Thanks for your help, but it didn’t work out

Browser other questions tagged html css mobile

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