WebSite X5Help Center

 
Rino D.
Rino D.
User

Riempimento spazio vuoto cella di tipo immagine in modalità responsive  it

Auteur : Rino D.
Visité 1412, Followers 2, Partagé 0  

Sto realizzando un progetto che è perfetto in modalità desktop e < 480 ma lascia a desiderare nei restanti intervalli della viewport .

Quindi sto cercando di compensare con jquery . Allego una preview per capirci meglio , praticamente ho
cella di sinistra con testo , cella adiacente destra con immagine .

Quando passo ad es in un intervallo >=720px;<11xxpx;
la cella che contiene l ' immagine rimane abbastanza vuota potrei per mettere delle patch nasconderla , potrei centrarla ... ma il mio obiettivo è quello di riempire parte dello spazio vuoto con un <div> o uno <span>
appeso dinamicamente ci sono riuscito , il problema che sposto la cella di sotto( che un codice html contenente un<hr/> in avanti Io vorrei riempire quello spazio (visto che c'è ) senza muovere nulla sotto...
Nella pagine interessata ho inserito nel tag 
<head></head>
<script>
$(function(){
var screen = $(window);
if ((screen.width() >=720)&&(screen.width()< 1154)) {
/* $("#attentionGrabber").hide();*/
$('div#imCellStyle_1').append( "<span>sotto la campa la capra campa </span>" );
}
});
</script>
In allegato quello che succede.Eppure lo <span> e in-line e non dovrebbe creare l ' accapo .
Forse nell ' allegato avevo usato un floating div ma il risultato è ===

Posté le
3 RéPONSES - 1 UTILES - 1 CORRECT
Rino D.
Rino D.
User
Auteur

ho utilizzato anche
 $( "<p>Test</p>" ).insertAfter( 'div#imCellStyle_1' ); il risultato è +- uguale
è come se l ' immagine occupa tutto lo spazio 

Lire plus
Posté le de Rino D.
Massimo C.
Massimo C.
User

parti dall'idea che deva avere la stessa disposizione di oggetti incolonnati come nella versione desktop. La filosofia del responsive è il contrario, alla minima risoluzione gli oggetti si mettono anche su una unica colonna, altrimenti diventa difficile renderli fruibili.

non entro nel merito di quello che chiedi e forse non è quello che chiedi ma ti consiglierei di creare il sito a 960 e di far predisporre gli oggetti nella risoluzione smartphone su una unica colonna. Mettere su due colonne su uno smartphone quello che hai postato come immagine, vuol dire non riuscire a vedere bene il sito.

ma è un mio parere.

Lire plus
Posté le de Massimo C.
Rino D.
Rino D.
User
Auteur

hello people ho risolto
ho definito una max-height per la cella in modo da "bloccarla"

<script>
$(function(){
var screen = $(window);
if ((screen.width() >=720)&&(screen.width()< 1154)) {
$('div#imCell_1').css({'max-height':'320px'});
$('div#imCellStyle_1').append( "<h5>lorem ipsum</h5><span>sotto la panca la capra campa sotto la </span>" );
/* $( "<p>Test</p>" ).insertAfter( 'div#imCellStyle_1' );*/
}
});
</script>
In questo modo posso riempire il vuoto della cella ..... jquery fà miracoli!!!

Lire plus
Posté le de Rino D.