Estilização do corpo da página

Link para usar: https://jpm-development.com/css/responsive/styles.css

Estilização do corpo da página
Descricao Codigo Codigo completo
Este código cria um container flexível que centraliza seu conteúdo horizontal e verticalmente e garante que ele ocupe toda a largura e altura disponíveis do seu elemento pai, mantendo sua posição relativa no layout. fyn-flex <div class="alert-primary-block">fyn-flex</div>
Altura dinâmica, ajustando-se de acordo com o conteúdo interno, enquanto se adapta bem a diferentes tamanhos de tela. Além disso, é sugerido colocar o container dentro de .fyn-flex para garantir centralização e alinhamento adequados no layout. E, caso o conteúdo ultrapasse o tamanho da tela, é criada uma barra. fyn-container <div class="alert-primary-block">fyn-container</div>
A classe .fyn-container-flow é usada para criar um container que ocupa 100% da largura disponível do elemento pai, mas com um limite máximo de largura igual à viewport para evitar que o conteúdo ultrapasse a tela. Além disso, é sugerido colocar o container dentro de .fyn-flex para garantir centralização e alinhamento adequados no layout. fyn-container-flow <div class="alert-primary-block">fyn-container-flow</div> 
          <div class="fyn-flex" style="background-color:red;">
            <div class="fyn-container" style="background-color:yellow;">
              <p>A altura (height) é de acordo como o conteúdo.</p>
            </div>
          </div>
        
          <div class="fyn-flex" style="background-color:red;">
            <div class="fyn-container-flow" style="background-color:yellow;">
              <p>E, caso o conteúdo ultrapasse o tamanho da tela, é criada uma barra.</p>
            </div>
          </div>

Inputs

Link para usar: https://jpm-development.com/css/responsive/styles.css

Link para usar: https://jpm-development.com/css/inputs/styles.css

Inputs 
          <div class="fyn-row">  
            <div class="fyn-resp-3">    
              <label>Text</label>
              <input type="text" name="#" id="#" placeholder="Text:">
            </div>
            <div class="fyn-resp-3">    
              <label>Text</label>
              <input type="text" name="#" id="#" placeholder="Text:">
            </div>
            <div class="fyn-resp-2">    
              <label>Text</label>
              <input type="text" name="#" id="#" placeholder="Text:">
            </div>
            <div class="fyn-resp-1">    
              <label>Text</label>
              <input type="text" name="#" id="#" placeholder="Text:">
            </div>
            <div class="fyn-resp-1">    
              <label>Text</label>
              <input type="text" name="#" id="#" placeholder="Text:">
            </div>
          </div>

List-view

Menos de 620px, quebra a linha e faz 100%

Link para usar: https://jpm-development.com/css/responsive/styles.css

Link para usar: https://jpm-development.com/css/inputs/styles.css

List view
Name:
Jeferson Carlos Santana
E-mail:
adm@gmail.com
Phone number:
1245 678910
Issue Country (ID/Passport):
124dd4f12 
          <div class="fyn-row">
            <div class="fyn-list">
              <span>Name:</span>
            </div>
            <div class="fyn-list-res">
              <span>Jeferson Carlos Santana</span>
            </div>
          </div>
          <div class="fyn-row">
            <div class="fyn-list">
              <span>E-mail:</span>
            </div>
            <div class="fyn-list-res">
              <span>adm@gmail.com</span>
            </div>
          </div>
          <div class="fyn-row">
            <div class="fyn-list">
              <span>Phone number:</span>
            </div>
            <div class="fyn-list-res">
              <span>1245 678910</span>
            </div>
          </div>
          <div class="fyn-row">
            <div class="fyn-list">
              <span>Issue Country (ID/Passport):</span>
            </div>
            <div class="fyn-list-res">
              <span>124dd4f12</span>
            </div>
          </div>