estou desenvolvendo um site para um amigo e não estou conseguindo criar a versão mobile do mesmo.
Quando tento verificar a versão mobile do site com a ajuda da ferramenta inspecionar do google chrome ele fica completamente desalinhado apesar de ja ter configurado o widht com 100%. Segue a imagem.
Até a FLEXBOX fica bugada, mas era para ela acompanhar o layout da página.
Vou enviar o codigo abaixo sem as imagens:
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap');
/* Resetando configurações do Navegador Padrão */
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: white;
width: 100%;
}
.whatsapp {
position: fixed;
top: 82%;
left: 1%;
padding: 10px;
z-index: 1;
width: 110px;
}
/* INICIO DO CABEÇALHO */
#cabecalho {
height: 120px;
width: 100%;
background-image: linear-gradient(to right, #ff7f00, #ff7f00, #fed728, #fedd34, #fee23f);
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
#logotipo {
height: 90px;
width: 156px;
margin-top: 20px;
margin-left: 30px;
background: url(../img/logo.png);
background-size: cover;
}
#content_cabecalho {
position: relative;
height: 60px;
width: 350px;
font-size: 23px;
margin-top: 30px;
overflow: hidden;
font-weight: bold;
}
#main_menu {
width: 100%;
height: 30px;
background-image: linear-gradient(to right, #ff7f00, #ff7f00, #fed728, #fedd34, #fee23f);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.menuitem {
text-align: center;
margin-left: 10px;
width: 200px;
}
.menuitem a {
color: black;
text-decoration: none;
}
/* FIM DO CABEÇALHO */
#content {
height: 150px;
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.item {
height: 150px;
width: 500px;
margin: 0 0 0 0;
}
.item img {
border-radius: 17px;
}
.tituloproduto {
margin: -130px 10px -10px 10px;
font-size: 17px;
width: 280px;
position: relative;
left: 200px;
font-weight: bold;
text-align: center;
}
.descricaoproduto {
margin: 10px;
text-align: center;
position: relative;
left: 200px;
width: 280px;
}
.botaocomprar {
margin: -5px 0 0 0;
text-align: center;
width: 280px;
position: relative;
left: 210px;
}
.botaocomprar button {
color: white;
background-color: #ffcc00;
width: 170px;
height: 30px;
border-radius: 20px;
border-color: #ffcc00;
font-size: 12px;
}
.botaocomprar button:hover {
background-color: #c72c2c;
border: 1px solid #c72c2c;
transition: background-color .5s;
}
/* Menu 2 */
#main_plans {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), linear-gradient(to right, #ff7f00, #ff7f00, #fed728, #fedd34, #fee23f);
height: 200px;
width: 100%;
text-align: center;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
#content_plans {
min-height: 20px;
}
.botaocategorias {
text-align: center;
margin: 10px;
}
.botaocategorias button {
color: white;
background-color: #ffcc00;
width: 170px;
height: 30px;
border-radius: 20px;
border-color: #ffcc00;
font-size: 12px;
}
#fundoimagem1 {
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)), url(../img/21.jpg);
background-size: cover;
height: 400px;
width: 100%;
}
#fundoimagem1 h1 {
color: white;
padding-top: 100px;
font-size: 30px;
}
#fundoimagem1 h2 {
color: white;
padding-top: 0px;
font-size: 60px;
animation: blinker 2s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
/* FIM DO MENU 2*/
#frasedeentrada {
position: relative;
color: white;
margin-top: 70px;
left: 100px;
background-color: pink;
overflow: hidden;
font-size: 41px;
text-align: center;
text-shadow: 6px 4px 6px rgba(0, 0, 0, 0.3);
}
#frasedeentrada i {
position: relative;
left: 250px;
top: 120px;
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
#imagemx i {
font-size: 40px;
color: white;
text-shadow: 6px 4px 6px rgba(0, 0, 0, 0.3);
}
/* Fim do Menu 2 */
/* Banner e Botões */
#botaodiario {
width: 130px;
height: 130px;
cursor: pointer;
text-align: center;
border-radius: 170px;
background-color: #ffcc00;
-webkit-text-stroke-color: #000;
font-size: 25px;
color: #000000;
padding-top: -20px;
border-bottom: 0px;
}
#botaodiario:hover {
background-color: rgb(255, 233, 36);
border-color: rgb(241, 230, 123);
transition: background-color .5s;
}
#botaosemanal {
width: 130px;
height: 130px;
cursor: pointer;
border-radius: 170px;
font-size: 30px;
background-color: #ffcc00;
-webkit-text-stroke-color: #000;
font-size: 25px;
color: #000000;
border-bottom: 0px;
}
#botaosemanal:hover {
background-color: rgb(241, 230, 123);
border-color: rgb(241, 230, 123);
color: black;
transition: background-color .5s;
}
#botaomensal {
width: 130px;
height: 130px;
cursor: pointer;
border-radius: 170px;
font-size: 30px;
background-color: #ffcc00;
-webkit-text-stroke-color: #000;
font-size: 25px;
color: #000000;
border-bottom: 0px;
}
#botaomensal:hover {
background-color: rgb(241, 230, 123);
border-color: rgb(241, 230, 123);
color: black;
transition: background-color .5s;
}
/* Fim do Banner e Botões */
#comocomprar {
font-size: 19px;
}
/* INICIO DOS PRODUTOS */
#background1 {
background-color: #ffcc00;
}
#produtos_ovo {
font-size: 13px;
}
#zoomprodutos {
overflow: hidden;
}
#zoomprodutos a {
color: black;
}
#zoomprodutos a:hover {
text-decoration: none;
}
#zoomprodutos img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#zoomprodutos:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
}
/* FIM DOS PRODUTOS */
footer {
font-size: 13px;
padding-top: 50px;
}
#colunafinal {
background-color: #333333;
color: #fff;
font-size: 12px;
text-align: center;
}
.dark-line {
font-size: 11px;
background-color: rgb(59, 59, 59);
text-align: center;
color: #ffffff;
padding: 10px 0 10px;
margin: 0;
}
@media (max-width: 1200px) {
#content {
height: 300px;
}
#main_menu {
height: 50px;
}
}
@media (max-width: 1087px) {
#main_plans {
flex-direction: column;
height: 450px;
}
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ovos 24 Horas | Compre Online</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/6e07d76513.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="./img/android-chrome-512x512.png">
</head>
<body>
<header>
<div id="cabecalho">
<div id="logotipo">
</div>
<div id="content_cabecalho">
<h5>atendimento@ovo24horas.com.br<br/></h5>
(11) 2222-3333 | 9.4444-2222
</div>
</div>
</header>
<nav id="main_menu">
<div class="menuitem"><a href="index.php"> Home <i class="fas fa-caret-down"></i></a></div>
<div class="menuitem"><a href="#">Planos <i class="fas fa-caret-down"></i> </a></div>
<div class="menuitem"><a href="tiposdeovos.php">Tipos de Ovos <i class="fas fa-caret-down"></i></a></div>
<div class="menuitem"><a href="cidades.php">Cidades que Atendemos</a></div>
<div class="menuitem"><a href="faleconosco.php">Contato</a></div>
</nav>
<div id="fundoimagem1">
<div class="container">
<h1 class="text-center">RECEBA EM SUA CASA</h1>
<h2 class="text-center">OVOS DA MELHOR QUALIDADE</h2>
<h3 class="text-center" style="color: white">COM FRETE GRÁTIS</h3>
</div>
</div>
<!-- Inicio dos Produtos --><br/>
<br/>
<div class="container">
<section id="content">
<article class="item">
<img src="./img/ovosbranco.jpg" height="130px" width="180px">
<div class="tituloproduto">
PLANO OVO VERMELHO MENSAL <br/> 1 ENTREGA COM 30 OVOS
</div>
<div class="descricaoproduto">
<span style="font-weight: bold; font-size: 20px; color: #ffcc00;"> R$ 19,99 </span> / ciclo
</div>
<div class="botaocomprar">
<button type="submit" class="btn">VER TODOS OS PRODUTOS</button>
</div>
</article>
<article class="item">
<img src="./img/ovosbranco.jpg" height="130px" width="180px">
<div class="tituloproduto">
PLANO OVO VERMELHO MENSAL <br/> 1 ENTREGA COM 30 OVOS
</div>
<div class="descricaoproduto">
<span style="font-weight: bold; font-size: 20px; color: #ffcc00;"> R$ 19,99 </span> / ciclo
</div>
<div class="botaocomprar">
<button type="submit" class="btn">VER TODOS OS PRODUTOS</button>
</div>
</article>
</section>
</div>
<!-- FIM DOS PRODUTOS -->
<div id="main_plans">
<div class="content_plans">
<span style="color: #ffcc00; font-size: 20px; font-weight: bold">ENTREGA SEMANAL</span></br>
<span style="color: white; font-size: 17px; font-weight: bold">OVOS NOVOS TODA SEMANA</span><br/>
<span style="color: white;">Selecionamos todos os ovos com muito cuidado!<br/></span>
<div class="botaocategorias">
<button type="submit" class="btn">EU QUERO!</button>
</div>
</div>
<div class="content_plans">
<span style="color: #ffcc00; font-size: 20px; font-weight: bold"> ENTREGA QUINZENAL<br/></span>
<span style="color: white; font-size: 17px; font-weight: bold">UMA ENTREGA A CADA 15 DIAS<br/></span>
<span style="color: white;">Tudo acontece automaticamente, nem se preocupe!<br/></span>
<div class="botaocategorias">
<button type="submit" class="btn">EU QUERO!</button>
</div>
</div>
<div class="content_plans">
<span style="color: #ffcc00; font-size: 20px; font-weight: bold">ENTREGA MENSAL<br/></span>
<span style="color: white; font-size: 17px; font-weight: bold">RECEBA UMA ENTREGA POR MÊS</span><br/>
<span style="color: white;">Você ainda pode alterar seu plano quando quiser!</span><br/>
<div class="botaocategorias">
<button type="submit" class="btn">EU QUERO!</button>
</div>
</div>
<br/>
<!-- Texto Index-->
<div class="container">
<div class="row">
<div class="col" id="textoindex">
<h1 class=text-center>Reserve ovos pelo menor preço!</h1> <br/>
<p class="text-center">Faça pacotes semanais, quinzenais ou mensais...</p>
<p class=text-center>Vendemos para micro, média e grande empresas, e você pessoa física também pode adquirir!</p>
<p class=text-center>Não espere o carro do ovo passar na sua rua, trabalahamos com atendimento 24 horas. 🍳
</div>
</div>
</div>
<!-- Fim Texto Index -->
<br>
<hr>
<?php
include 'footer.php'; ?>