Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Responsive border immagini e didascalie

    Ciao a tutti,
    ho voluto aggiungere nel css un border intorno all'immagine quando inserisco una didascalia.
    Le immagini si adattano alle dimensioni dello schermo, quando sono senza bordo e didascalia, ma quando inserisco del testo queste rimangono "fisse" nel layout.
    Questo è il codice modificato per il border-caption:

    /* --- Post Images and Video --- */
    #content img {
    max-width:100%;
    height: auto;
    margin: 0;
    padding: 0;
    }
    #content img.aligncenter {
    margin: 20px auto;
    }
    #content img.alignleft ,#content .wp-caption.alignleft {
    margin: 10px 20px 0 0;
    }
    #content img.alignright,#content .wp-caption.alignright {
    margin: 10px 0 0 20px;
    }
    #content img.alignnone {
    margin: 20px 0;
    }
    #content .wp-caption.alignnone {
    margin: 0 0 20px 0;
    }
    #content .wp-caption.aligncenter{
    margin-bottom: 10px;
    }
    #content .post .wp-caption {
    max-width: 100%;
    border: 1px solid #ddbb8f;
    padding: 5px;
    text-align: center;
    }
    #content .single-entry-content .wp-caption {
    font: normal .8em/1.4 'Averia Libre', cursive;
    border: 1px solid #ddbb8f;
    padding: 5px;
    text-align: center;
    }
    #content .post p.wp-caption-text {
    font: normal .8em/1.4 'Averia Libre', cursive;
    margin: 0;
    padding: 7px 0 10px 0;
    color: #999;
    }
    #content object,
    #content embed,
    #content iframe {
    max-width: 100%;
    margin: 3px 0 10px;
    display: block;
    }

    Come faccio ad adattare al layout responsive anche le immagini con didascalia e bordo?
    I risultati li potete vedere qui:

    http://salutidavicenza.it

    Grazie a tutti,
    un augurio di Buona Pasqua
    Stefano

  2. #2
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    Ciao, non so se ho capito bene, ti riferisci all'immagine di San Lazzaro?
    Nel codice si vede questo
    <div id="attachment_2029" style="width: 447px" class="wp-caption aligncenter">
    chi imposta quella larghezza fissa?

  3. #3
    Quote Originariamente inviata da ResianTaxidrive Visualizza il messaggio
    Ciao, non so se ho capito bene, ti riferisci all'immagine di San Lazzaro?
    Nel codice si vede questo
    <div id="attachment_2029" style="width: 447px" class="wp-caption aligncenter">
    chi imposta quella larghezza fissa?
    Ciao,
    succede in tutte le immagini con didascalia e con bordo in tutte le pagine del sito.
    La parte di codice che ho incollato riguarda il css. Sono "quasi" sicuro che è lì che devo apportare modifiche affinchè anche le immagini con cornice si adattino alle dimenisoni dello schermo (smartphone, tablet, ecc..)

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.