Wie bekomme ich eine responsive Website mit einem Rahmen fieldset

Question

Hallo Ich habe ein Problem auf meiner Website von Handy. Die Desktop-Ansicht ist ok

Hier ist ein Stapel Ausschnitt aus der Seite:

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css); 
 

 
.campiRicettaPersonale{ 
 
    margin-left: 7%; 
 
    margin-right: 7%; 
 
    padding-top: 10%; 
 
    height: 100%; 
 
} 
 
.bordFieldset{ 
 
    padding-top: 1px; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    padding-bottom: 30px; 
 
    border: 1px white; 
 
    border-radius: 9px; 
 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); 
 
}

<div class="campiRicettaPersonale"> 
 
      <div class="nomeRicetta current"> 
 
      <fieldset class="bordFieldset"> 
 
       <h2 class="well titolo">Non perdere tempo crea ora la tua ricetta!<br> Per iniziare specifica un nome</h2> 
 
       <div class="row"> 
 
       <div class="col-md-8"> 
 
        <div class="form-group" id="nomeRicettaIn"> 
 
        <input name="nomeRicetta" id="nomeRicetta" type="text" class="form-control" placeholder="Nome della tua ricetta"> 
 
        </div> 
 
        <span class="help-block" id="nomeRicettaError"></span> 
 
       </div><!--Fine div col--> 
 
       <div class="col-md-4"> 
 
        <select name="tipoPiatto" class="form-group form-control" id="tipoPiatto"> 
 
        <option selected value="Selezionare la tipologia del piatto" >Selezionare la tipologia del piatto</option> 
 
        </select> 
 
       </div><!--Fine div col--> 
 
       </div> 
 
       <input type="button" name="next" class="btn btn-success next btndx" value="Successivo" /> 
 
      </fieldset> 
 
      </div><!--Fine div nomeRicetta step 1--> 
 
      </div> 
 

Answer 1

Verwenden Sie eine Medienabfrage die Marge und Polsterung in Mobil steuern :

@media (max-width: 768px) { 
    .campiRicettaPersonale { 
    margin: 5px; 
    } 
    .bordFieldset { 
    padding: 5px; 
    margin: 5px; 
    } 
} 

Um mehr über diese, lesen Sie in diesem Artikel (5 Minuten zu lesen) zu lesen: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

.campiRicettaPersonale { 
 
    margin-left: 7%; 
 
    margin-right: 7%; 
 
    padding-top: 10%; 
 
    height: 100%; 
 
} 
 

 
.bordFieldset { 
 
    padding-top: 1px; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    padding-bottom: 30px; 
 
    border: 1px white; 
 
    border-radius: 9px; 
 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); 
 
} 
 

 
@media (max-width: 768px) { 
 
    .campiRicettaPersonale { 
 
    margin: 5px; 
 
    } 
 
    .bordFieldset { 
 
    padding: 5px; 
 
    margin: 5px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="campiRicettaPersonale"> 
 
    <div class="nomeRicetta current"> 
 
    <fieldset class="bordFieldset"> 
 
     <h2 class="well titolo">Non perdere tempo crea ora la tua ricetta!<br> Per iniziare specifica un nome</h2> 
 
     <div class="row"> 
 
     <div class="col-md-8"> 
 
      <div class="form-group" id="nomeRicettaIn"> 
 
      <input name="nomeRicetta" id="nomeRicetta" type="text" class="form-control" placeholder="Nome della tua ricetta"> 
 
      </div> 
 
      <span class="help-block" id="nomeRicettaError"></span> 
 
     </div> 
 
     <!--Fine div col--> 
 
     <div class="col-md-4"> 
 
      <select name="tipoPiatto" class="form-group form-control" id="tipoPiatto"> 
 
      <option selected value="Selezionare la tipologia del piatto">Selezionare la tipologia del piatto</option> 
 
      </select> 
 
     </div> 
 
     <!--Fine div col--> 
 
     </div> 
 
     <input type="button" name="next" class="btn btn-success next btndx" value="Successivo" /> 
 
    </fieldset> 
 
    </div> 
 
    <!--Fine div nomeRicetta step 1--> 
 
</div>