HTML Como centralizar box model e deixar responsivo

EddK · 25 de julho de 2021

Boa tarde!

Criei uma box modal, mas tenho alguns problemas:

- não consigo deixar o modal (responsivo)

- não consigo centralizar verticalmente o modal (preciso que centralize conforme o aparelho (desktop, tablet e celular).

segue o código:

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <title>Modal</title>

    <style>
        .modal-wrap {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 99999;
            opacity: 0;
            -webkit-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            pointer-events: none;
        }

        .modal-wrap:target {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-wrap>div {
            width: 560px;
            position: relative;
            margin: 0 auto;
            padding: 20px 10px;
            background: #fff;
        }

        .modal-content__descript {
            display: block;
            width: 100%;
        }

        .modal-content__descript p {
            color: #666;
            font-size: 12px;
            margin: 10px 0;
            height: 50px;
            padding: 30px 10px;
        }

        .close {
            position: absolute;
            width: 30px;
            right: 20px;
            top: 20px;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            color: #333;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div>
        <a href="#code-1">acessar modal</a>
    </div>
    
    

    <div class="modal">
        <div id="code-1" class="modal-wrap">

            <div class="modal-content">

                <div class="modal-content__descript">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in not only five</p>
                </div>

                <a href="#close" title="Fechar" class="close"><i class="faz fa-times"></i></a>

            </div>

        </div>
    </div>

</body>

</html>

Desde já muito obrigado

Marcelo Calazans · 25 de julho de 2021

@EddK

Olá colega.

Deixei o box centralizado para você, e estou mostrando como deixar o box responsivo usando CSS Media Queries ( https://www.w3schools.com/css/css3_mediaqueries_ex.asp ).

Agora cabe a você acertar o texto dentro do box usando a mesma ideia do Media Queries.

Existiria outras formas de deixar o box responsivo, mas no desenvolvimento web é difícil fugir totalmente das Media Queries, e elas são muito úteis.

Segue o código:

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <title>Modal</title>

<style>
        .modal-wrap {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 99999;
            opacity: 0;
            -webkit-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            pointer-events: none;
        }

        .modal-wrap:target {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-wrap>div {
            width: 560px;
            position: absolute;
            top: 50%;
            left: 50%;            
            transform: translate(-50%, -50%);
            padding: 20px 10px;
            background: #fff;
        }

        .modal-content__descript {
            display: block;
            width: 100%;
        }

        .modal-content__descript p {
            color: #666;
            font-size: 12px;
            margin: 10px 0;
            height: 50px;
            padding: 30px 10px;
        }

        .close {
            position: absolute;
            width: 30px;
            right: 20px;
            top: 20px;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            color: #333;
            text-decoration: none;
        }
@media (max-width: 1367px){
.modal-wrap>div {
  width: 480px;            
}
}

@media (max-width: 1150px){
.modal-wrap>div {
  width: 400px;            
}
}

@media (max-width: 901px){
.modal-wrap>div {
  width: 380px;            
}
}

@media (max-width: 640px){
.modal-wrap>div {
  width: 350px;            
}
}

@media (max-width: 480px){
.modal-wrap>div {
  width: 320px;            
}
}

@media (max-width: 360px){
.modal-wrap>div {
  width: 300px;            
}
}

@media (max-width: 320px){
.modal-wrap>div {
  width: 280px;            
}
}
      
</style>
    
</head>

<body>
    <div>
        <a href="#code-1">acessar modal</a>
    </div>
    
    

    <div class="modal">
        <div id="code-1" class="modal-wrap">

            <div class="modal-content">

                <div class="modal-content__descript">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in not only five</p>
                </div>

                <a href="#close" title="Fechar" class="close"><i class="faz fa-times"></i></a>

            </div>

        </div>
    </div>

</body>

</html>