Brak responsywności teł div'ów

[Glaciu]

Witajcie,

mam problem z responsywnością teł na stronie, którą robię od podstaw wykorzystując bootsrap'a. W przy pełnym wymiarze wszystko działa, natomiast przy zmniejszeniu rozdzielczości elementy zostają bez tła, a zdefiniowane backgroundy zmieniają się w małe kwadraciki. Macie jakieś pomysły?

Adres strony www.krakow-wesele.pl

[sanas]

zmień display: inline na display: block;

[Glaciu]

Niestety po zastosowaniu display: block tło zostaje ale responsywność nie działa jak należy.

[sanas]

bo w #header-left-widget-area masz zdefiniowane width: 67% i margin-right: 1%. Usuń to i będzie OK.

[sanas]

To powinno wyglądać mniej więcej tak:

<div class="container"> 
 <div class="row">
  <div class="col-md-4">
 <p>W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem.</p> 
  </div>

  <div class="col-md-4">
 <p>W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem. </p> 
  </div>

  <div class="col-md-4">
 <p>W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem. </p> 
  </div>

 </div> <!-- /.row -->

 <div class="row">

   <div class="col-md-8">
  <p>W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem. </p> 
   </div>

   <div class="col-md-4">
  <p>W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem. </p> 
   </div>

 </div> <!-- /.row -->

</div><!-- /.container -->

[pyzdera]

Usunąć:

#body-left-widget-area {
background: none repeat scroll 0 0 / 100% auto #FFFFFF;
}
#body-mid-widget-area {
background: none repeat scroll 0 0 #FFFFFF;
}
#body-right-widget-area {
background: none repeat scroll 0 0 #FFFFFF;
}
#header-left-widget-area {
background: none repeat scroll 0 0 #FFFFFF;
display: inline;
margin-right: 1%;
width: 67%;
}

#header-right-widget-area {
background: none repeat scroll 0 0 #FFFFFF;
display: inline;
width: 32%;
}

Zmienić:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4,
.col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7,
.col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10,
.col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
min-height: 1px;
padding-left: 15px; /* usunąć tą linię */
padding-right: 15px; /* usunąć tą linię */
position: relative;
}

dodać:

.widget.widget_text {
background: none repeat scroll 0 0 #FFFFFF;
padding: 10px;
margin: 5px;
}

margin-em i padding-iem trzeba się pobawić

I jak napisał kolega powyżej zmienić listę (<li>) na akapity (<p>) zostawiając klasy i ew ID jeśli będziesz oddzielnie formatował każdy z akapitów.