[Resolved] problem: non-responsive image background

[Author]

Posts

[massimoS527]

.

[Noman]

I can not understand italian language, but I will use google translator to understand your message and try my level best to solve the issue.

[massimoS527]

grazie per l'italiano !!!

il mio problema era che tutti gli elementi : post title - featured image, ecc restassero sempre alla stessa posizione rispetto lo sfondo e fossero anche Responsive.

ho creato un div "contenitore" (freccie) e al suo interno ho messo : background", "post title", "featured image" ecc . infatti se sposti il DIV "contenitore" si spostano anche tutti gli elementi. Perfetto !

------>  <div class="contenitore">  <------
<div class="lapide-creatura" style="background-image:url('[wpv-post-field name='wpcf-layout-ricordo']');"/>
<div class="titolo-creatura">[wpv-post-title]</div>
<div class="prima-foto">[wpv-post-featured-image size="custom" width="400"]</div>
<div class="dedica">[types field='dedica'][/types]</div>
<div class="dedica-seconda">[types field='dedica-seconda'][/types]</div>
<div class="data-decesso">[types field='data-decesso'][/types]</div>
</div>
[php]

vedi online: <em><u>hidden link</u></em>

ora devo rendere TUTTO responsive .
DOMANDA: secondo te si fa modificando la classe ".contentore" ? Come ?

[php]
.contenitore {
  position:relative;
  top:5px;
  left:5px;
  width: 800px;
  height: 600px;
   
}

SE NON CAPISCI, VEDO DI FARE TRADURRE IN INGLESE DA UNA PERSONA....GOOGLE NON E' BRAVO COME TRADUTTORE ?

[Noman]

Hello Massimo,

You can use media screens and give margin in percentage(%) instead of pixels, in this way all elements will move together.

Please note this requires a custom code or modifications which falls into Custom coding & custom development and it is out of support policy (https://toolset.com/toolset-support-policy/). So we recommend to contact Toolset recommended service providers to further discuss the custom approach. We have some recommended list of service providers here if you would like to take a look: https://toolset.com/consultant/

Thanks

[massimoS527]

era per chiudere il post e permettere anche ad altri "comuni mortali" di imparare una cosa nuova.

grazie comunque

se posso fare una critica costruttiva, aiutate chi non è un programmatore o esperto come voi. in fondo non è un lavoro che ho chiesto ma un piccolo aiuto !

[Noman]

Sorry for the inconvenience. We are always happy to help you, but I believe there is confusion. If you can please tell us the exact expected output then we can provide you CSS for that.

Thank you

[massimoS527]

ok , grazie ?

per capire meglio ho creato una pagina di esempio : hidden link
come potete vedere è tutta responsive: tablet, smartphone.

il layout "creatura schede" che è usato per i tipi di post "creature" invece non è responsive
vedi : hidden link

Il Layout "creature schede" ha delle classi per posizionare gli elementi: titolo, foto, ecc.
non capisco cosa c'è che non va nel codice CSS. Ci deve essere una proprietà del CSS che rovina il responsive

(spero di avere spiegato bene)

/*  layout scheda creatura  */

.contenitore {
  position:relative;
  top:5px;
  left:5px;
  width: 800px;
  height: 600px;
   
   
}


.lapide-creatura {
    position: absolute;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
  
      
  
}



.titolo-creatura  { 
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size:45px;
    color:#ffffff;
 
 
}

.prima-foto img  {

  
  margin-top:100px;  
  border: 6px solid #f9f2ee;
  border-radius: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  }

.dedica {
  position: absolute;
  bottom:100px;
  left:120px;  
  color:#ffffa9;
  font: italic bold 30px Georgia,serif;
  
  
}


.dedica-seconda {
  position: absolute;
  bottom:60px;
  left:180px;  
  color: #ffffa9;
  font: italic bold 30px Georgia,serif;
   
}

.data-decesso {
    position: absolute;
    color:#f0f0e1;
    font-size: 18px;
     bottom:5px;
     right:10px;  
  
   
}

[Noman]

Hello Massimo,

I have again removed position absolute and fixed height width and also updated CSS. Here is updated CSS:

.contenitore {
  position:relative;
  top:5px;
  left:5px;
  max-width: 800px;
  width:100%;
}


.lapide-creatura {
  background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%; 
}

.titolo-creatura  { 
    color: #ffffff;
    font-size: 45px;
    padding-top: 10px;
    text-align: center;
}

.prima-foto {
    margin: auto;
    max-width: 52%;
}

.prima-foto img  {
  
 border: 6px solid #f9f2ee;
    border-radius: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }

.dedica {
  	color: #ffffa9;
    font: italic bold 30px Georgia,serif;
    margin-left: 15%;
    margin-top: 50px;
    position: relative;
  }
.dedica-seconda {
  color: #ffffa9;
    font: italic bold 30px Georgia,serif;
    margin-left: 22.5%;
    position: relative;
   
}

.data-decesso {
   color: #f0f0e1;
    font-size: 18px;
    margin-top: 25px;
    padding-bottom: 5px;
    padding-right: 10px;
    text-align: right; 
  
}

/*  END SCHEDA CREATURE */

@media screen and (max-width:500px){
   
  .titolo-creatura {
    font-size: 22px;
  }
  
  .prima-foto {
    max-width: 75%;
   }
  
  .dedica,
  .dedica-seconda{
  	font-size:22px;
  }
}

And now your page fully responsive.

Thank you

[massimoS527]

ciao sei bravissimo !!!
voglio capire una cosa: per aumentare lo spazio del titolo (vedi immagine allegata)

lavoro su questa parte di CSS ?

@media screen and (max-width:500px){
    
  .titolo-creatura {
    font-size: 22px;
  }
   
  .prima-foto {
    max-width: 75%;
   }
   
  .dedica,
  .dedica-seconda{
    font-size:22px;
  }

grazie !!!!!!!!!!!

[Noman]

Hi,

I have fixed this by adding following CSS:

@media screen and (max-width:768px){
.lapide-creatura {
    margin-bottom: 50px;
} 
}

Thank you