0
Header problem:
I can’t leave the last button pressed to the right side of the page, like a toogle navbar.
- Selects texts "fade" when decreasing resolutions.
Problem on the Footer:
- Footer items are on top of each other by decreasing resolutions.
Observing:
The responsiveness is both in the container part and in the text part of the selects, because they "disappear" in smaller display...
Prototype of how it should look:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="...">
<meta name="author" content="Thiago De Bonis Carvalho Saad Saud">
<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="css/stylesheet/colors.css">
<link rel="stylesheet" href="css/fontawesome/fontawesome-all.css">
<title>Document</title>
</head>
<body class="aliansce-bg-dark-grey">
<header>
<div class="container-fluid p-2">
<div class="d-flex flex-row">
<form action="" class="form-inline rounded bg-white">
<div class="col">
<!-- Indicadores Custom-Select -->
<div class="form-group">
<div class="input-group">
<label for="select-indicadores" class="input-group-text bg-transparent border-0">
<i class="fas fa-chart-line aliansce-text-grey"></i>
</label>
<select class="custom-select border-0" id="select-indicadores" required>
<option value="null" selected disabled>Escolha o Indicador</option>
<optgroup label="INDICADORES">
<option value="null">Vendas Absoluta</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="col">
<!-- Shopppings Custom-Select -->
<div class="form-group">
<div class="input-group">
<label for="select-shoppings" class="input-group-text bg-transparent border-0">
<i class="far fa-building" aliansce-text-grey></i>
</label>
<select class="custom-select border-0" id="select-shoppings" required>
<option value="null" selected disabled>Escolha o Shopping</option>
<optgroup label="RIO DE JANEIRO">
<option value="null">Bangu</option>
<option value="null">Boulevard Campos</option>
<option value="null">Carioca</option>
<option value="null">Caixas</option>
<option value="null">Passeio</option>
<option value="null">Pátio Alcântara</option>
<option value="null">Santa Cruz</option>
<option value="null">Grande Rio</option>
<option value="null">Leblon</option>
<option value="null">São Gonçalo</option>
<option value="null">Via Parque</option>
</optgroup>
<optgroup label="MINAS GERAIS">
<option value="null">Boulevard Belo Horizonte</option>
</optgroup>
<optgroup label="SÃO PAULO">
<option value="null">Boulevard Bauru</option>
<option value="null">Continental</option>
<option value="null">Santana Parque</option>
<option value="null">Praça Nova Araçatuba</option>
<option value="null">Santa Úrsula</option>
<option value="null">Taboão</option>
<option value="null">West Plaza</option>
</optgroup>
<optgroup label="ESPIRITO SANTO">
<option value="null">Boulevard Vila Velha</option>
</optgroup>
<optgroup label="SANTA CATARINA">
<option value="null">Floripa</option>
</optgroup>
<optgroup label="RIO GRANDE DO SUL">
<option value="null">Praça Nova Santa Maria</option>
</optgroup>
<optgroup label="MATO GROSSO">
<option value="null">Goiabeiras</option>
</optgroup>
<optgroup label="DISTRITO FEDERAL">
<option value="null">Boulevard Brasília</option>
</optgroup>
<optgroup label="BAHIA">
<option value="null">Boulevard Feira de Satana</option>
<option value="null">Boulevard Vitória da Conquista</option>
<option value="null">Bahia</option>
</optgroup>
<optgroup label="ALAGOAS">
<option value="null">Parque Maceió</option>
</optgroup>
<optgroup label="CEARÁ">
<option value="null">Parangaba</option>
</optgroup>
<optgroup label="PARÁ">
<option value="null">Boulevard Belém</option>
<option value="null">Parque Belém</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="col">
<!-- Data Custom-Select -->
<div class="form-group">
<div class="input-group">
<label for="select-data" class="input-group-text bg-transparent border-0">
<i class="far fa-calendar-alt aliansce-text-grey"></i>
</label>
<select class="custom-select border-0" id="select-data" required>
<option value="null" selected disabled>Escolha a Data</option>
</select>
</div>
</div>
</div>
<div class="col">
<!-- Visão Custom-Select -->
<div class="form-group">
<div class="input-group">
<label for="select-visao" class="input-group-text bg-transparent border-0">
<i class="far fa-eye aliansce-text-grey"></i>
</label>
<select class="custom-select border-0" id="select-visao" required>
<option value="null" selected disabled>Escolha a Visão</option>
<optgroup label="ABL">
<option value="null">Lazer</option>
<option value="null">Lojas Âncoras</option>
<option value="null">MegaLojas</option>
<option value="null">Satélite</option>
</optgroup>
<optgroup label="ABRASCE">
<option value="null">----</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-lg aliansce-bg-green text-white"><i class="fab fa-searchengin fa-lg"></i></button>
</div>
</form>
<div class="col ml-5" style="background-color: red">
<button type="button" class="btn btn-lg aliansce-bg-green text-white"><i class="fab fa-searchengin fa-lg"></i></button>
</div>
</div>
</div>
</header>
<!--Footer Navegação-->
<div class="fixed-bottom aliansce-bg-grey p-2">
<div class="container-fluid">
<div class="row">
<div class="col-2 d-flex">
<button type="button" class="btn btn-lg bg-transparent"><img src="img/logo/aliansce-icon.svg" alt="Aliansce Logo" class="img-fluid w-25 text-white"><span class="ml-2 text-white">SOBRE</span></button>
</div>
<div class="col-2 d-flex">
<button type="button" class="btn btn-lg bg-transparent"><i class="fas fa-chart-line aliansce-text-green"></i><span class="ml-2 text-white">NÚMEROS</span></button>
</div>
<div class="col-2 d-flex">
<button type="button" class="btn btn-lg bg-transparent "><i class="fas fa-shopping-bag aliansce-text-green"></i><span class="ml-2 text-white">MARCAS</span></button>
</div>
<div class="col-2 d-flex">
<button type="button" class="btn btn-lg bg-transparent "><i class="fas fa-camera aliansce-text-green"></i><span class="ml-2 text-white">GALERIA</span></button>
</div>
<div class="col-2 d-flex">
<button type="button" class="btn btn-lg bg-transparent "><i class="fab fa-accusoft aliansce-text-green"></i><span class="ml-2 text-white">PLANTA</span></button>
</div>
<div class="col-2 d-flex">
<button type="button" class="btn btn-lg bg-transparent "><i class="fas fa-map-marker-alt aliansce-text-green"></i><span class="ml-2 text-white">LOCAL</span></button>
</div>
</div>
</div>
</div>
<!-- Javascript Config -->
<script src="js/jquery/jquery.js"></script>
<script src="js/bootstrap/bootstrap.js"></script>
</body>
</html>
Face the footer icons are not getting over each other not, at least in the test I did here. Already about select what you want with them? completely remove the text on small screens, put in column form one under the other, what you want?
– hugocsl
@hugocsl the selects and the search button is part of a search form, with the selects I intend to be visible the text for both notebook-desktop and tablets, already the footer icons, they overlap when I decrease to the tablet.
– user109930