Card BootStrap4

di
Ancaja
il
2 risposte
A
Ancaja
Pochi posts
Iscritto da
mar, 2020
Messaggi:
13

Card BootStrap4

Buonasera

Sto cercando di creare un template responsive per un piccolo sito tramite Bootstrap 4.

Praticamente il template da desktop viene visualizzato come da immagine 1 mentre da smartphone come da immagine 2.

Avrei bisogno di cambiare la dimensione della card nella modalitá smartphone in modo da visualizzare tutta l'immagine del prodotto.

Ho provato diverse soluzioni ma non riesco a implementare questa cosa

ecco il codice: 
<!-- inizio cards -->
    <div class="row">

    <div class="col-lg-3">
      <div class="card-deck my-3">
        <div class="card">
          <img src="{% static 'img/foto1.jpg' %}" class="card-img-top" alt="...">
            <div class="card-body">
              <h6 class="card-title"><strong>100€</strong> - Giacca arancio bambino</h6>
              <button type="button" class="btn btn-outline-secondary"><i class="fas fa-info-circle"></i> Info</button>
              <button type="button" class="btn btn-outline-secondary"><i class="fas fa-shopping-cart"></i> Prenota</button>
            </div>
        </div>
      </div>
    </div>
Ecco le immagini:

desktop.jpg
desktop.jpg


smartphone.jpg
smartphone.jpg

2 Risposte

  • spocchio
    spocchio
    Pochi posts
    Iscritto da
    mag, 2020
    Messaggi:
    26

    Re: Card BootStrap4

    Puoi aggiungere un CSS che influisca solo sulla parte mobile:
    
<style>
@media (max-width: 700px) { 
    .card-img-top {
        height: 5cm !important;
    }
 }
</style>
    Ovviamente al posto di "height:..." metti l'altzza dell'immagine. Se non la conosci prova a usare i valori 100% o initial
  • A
    Ancaja
    Pochi posts
    Iscritto da
    mar, 2020
    Messaggi:
    13

    Re: Card BootStrap4

    Risolto!

    Grazie mille!
Devi accedere o registrarti per scrivere nel forum
2 risposte