Responsive div

3 naročniki

Zdravo

Sicer sem že imel eno temo glede pozicioniranja in da ne mešam jabolk in hrušk, sem odprl novo temo, ki se sicer nanaša na isto zadevo, ampak druga nijansa :)

trenutna koda

<div id="container">
                <div class="meta-info1">
                    <div class="kje_levo"><b>KJE:</b></div><div class="kje_desno"><i><?php echo get_post_meta($post->ID, 'prizorisce', true); ?></i> (<a href="JavaScript:newPopup('http://maps.google.com/?q=<?php echo get_post_meta($post->ID, 'prizorisce', true); ?>');">prizorišče</a>)</div>
                    <div class="kje_levo"><b>PRIČETEK:</b></div><div class="kje_desno"><i><?php echo $td_mod_single->get_date(false);?></i></div>
                    <div class="kje_levo"><b>ZAKLJUČEK:</b></div><div class="kje_desno"><i>besedilo</i></div>
                    <hr width="40%">
                    <div class="kje_levo"><b>VSTOPNINA:</b></div><div class="kje_desno"><i><?php echo get_post_meta($post->ID, 'vstopnice', true); ?></i></div>
                    <div class="kje_levo"><b>ORGANIZATOR:</b></div><div class="kje_desno"><i><?php echo get_post_meta($post->ID, 'organizator', true); ?></i></div>
                </div>
            </div>

in pa trenutni CSS

.meta-info1 {
  font-family: 'Open Sans', arial, sans-serif;
  font-size: 16px;
  color: #444444;
  background-color: #f5f5f5;
  line-height: 36px;
  font-style: normal;
  padding: 15px 0px 15px 15px;
  /* responsive portrait tablet */
  /* responsive portrait phone */
}
.kje_levo {
 float:left;
 width:20%;
 text-align: right;
 }
 .kje_desno {
    padding:0px 0px 0px 10px;
    margin-left: 20%;
}

zgornja koda in CSS zelo lepo pokaže na straneh .. kot je željeno,

vendar pa se na mobilnem telefonu v sredini začne vse prekrivati

screenshot

kakšen nasvet?

simpl....uporabi css media queries

po domače povedan: imaš 2 stila, enega za resolucijo nad 600px (ali kolikor že) ostalo za pod to
primer: https://css-tricks.com/css-media-queries/

še boljši primer pa je da si pogledaš dl-horizontal od twitter bootstrap

Če ni prostora na razpolago ti ne preostane drugega da na določeni resoluciji kjer se začne prekrivat spremeniš layout oz. popraviš CSSje takod a bolje deluje. Za tvoj primer bi bilo nekaj takega:

@media only screen and (max-width: 400px) {
  .kje_levo, .kje_desno {
    width: auto;
    float: none;
    margin: 0;
    text-align: left;
  }
}

tistih 400px si nastavi na pravo širino .... na označenem mestu se ti bodo vrstice zložile eno pod drugo. No fajn je da desnemu elementu daš še malo margina bottom da boš lepo ločil posamezne elemente

hvala lepa .. bom naredil tako .. sem se sicer že igral nekaj po nasvetu bostjana

EDIT .. odlično!