html - Images and text aligment in footer -

-

i learning css , html while customizing wordpress theme, cannot make images , text scale mobile.

the thing have 2 sections have white background, 1st 1 has 3 pictures links in them, 2nd 1 typical footer sitemap etc.

i want center pictures , make them scale on mobile, footer one.

currently last picture gets dropped down

http://codepen.io/phoez/pen/rpjdrr

#partnerzy {    background-color: #ffffff;    height: 80px;    width: auto;  }  #rgw {    padding-left: 10%;    padding: 10px;    float: left;  }  @media (max-width: 800px) {    #rgw {      padding-left: 10%;      padding: 10px;      float: left;      max-width: 40%;    }  }  #zgs {    padding-left: 15%;    float: left;    text-align: center;    width: auto;  }  @media (max-width: 800px) {    #zgs {      /* padding-left: 25%; */      float: left;      text-align: center;      width: auto;      max-width: 40%;    }  }  #sa {    padding-left: 25%;    float: left;    width: auto;  }  @media (max-width: 800px) {    #sa {      padding-left: 55%;      width: auto;      max-width: 33%;    }  }  #stopka ul {    list-style: none !important;    background-color: #ffffff !important;    text-align: center !important;    padding: 0 !important;    margin: 0 !important;  }  #stopka {    text-decoration: none !important;    display: block !important;  }  #stopka li {    margin-left: 30px;    font-family: "roboto", sans-serif !important;    font-size: 13px;    font-weight: 700 !important;    text-decoration: none;    color: #999999;    line-height: 40px;    height: 40px;    display: inline-block;    margin-right: 5px;  }  #stopka {    background-color: #ffffff;    height: 80px;    width: auto;  }
<div id="partnerzy">    <div id="rgw">      <a href="">        <img alt="rgw" src="http://38.media.tumblr.com/avatar_c9671e5c8ca3_128.png">      </a>    </div>    <div id="zgs">      <a href="">        <img alt="zgs " src="http://38.media.tumblr.com/avatar_c9671e5c8ca3_128.png">      </a>    </div>    <div id="sa">      <a href="">        <img alt="schleifenbaum & adler" src="http://38.media.tumblr.com/avatar_c9671e5c8ca3_128.png">      </a>    </div>  </div>  <br>  <br>  <div id="stopka">    <li class="mapa"><a href="">sitemap</a>    </li>    <li class="redakcja"><a href="">editorial office</a>    </li>    <li class="nota"><a href="">legal note</a>    </li>    <li class="politykacookies"><a href="">cookies policy</a>    </li>    <li class="regulamin"><a href="">portal rules</a>    </li>  </div>

any ideas?

#partnerzy {    background-color: #ffffff;    width: auto;  text-align: center;  }  #partnerzy > div{    padding: 10px;  display: inline-block;  text-align: center;    }    #stopka ul {    list-style: none !important;    background-color: #ffffff !important;    text-align: center !important;    padding: 0 !important;    margin: 0 !important;  }  #stopka {    text-decoration: none !important;    display: block !important;  }  #stopka li {      margin-left: 30px;    font-family: "roboto", sans-serif !important;    font-size: 13px;    font-weight: 700 !important;    text-decoration: none;    color: #999999;    line-height: 40px;    height: 40px;    display: inline-block;    margin: 0 15px;  }  #stopka {    background-color: #ffffff;    height: 80px;    width: auto;  clear: both;  text-align: center;  }  @media (max-width: 520px){  #partnerzy > div{      display: block;      clear: both;  }  #partnerzy > div img{      width: 60%;  }  }
<div id="partnerzy">    <div id="rgw">  <a href="">    <img alt="rgw" src="http://38.media.tumblr.com/avatar_c9671e5c8ca3_128.png">  </a>    </div>    <div id="zgs">  <a href="">    <img alt="zgs " src="http://38.media.tumblr.com/avatar_c9671e5c8ca3_128.png">  </a>    </div>    <div id="sa">  <a href="">    <img alt="schleifenbaum & adler" src="http://38.media.tumblr.com/avatar_c9671e5c8ca3_128.png">  </a>    </div>  </div>    <div id="stopka">    <li class="mapa"><a href="">sitemap</a>    </li>    <li class="redakcja"><a href="">editorial office</a>    </li>    <li class="nota"><a href="">legal note</a>    </li>    <li class="politykacookies"><a href="">cookies policy</a>    </li>    <li class="regulamin"><a href="">portal rules</a>    </li>  </div>


Comments

Post a Comment

Popular posts from this blog

How has firefox/gecko HTML+CSS rendering changed in version 38? -

-
i have a little website header no longer renders correctly, since updating firefox 38.0.5 [the faceplant logo missing top right, , main logo no longer centred]. still renders expected in other browsers. how has engine's rendering changed in update? according mdn , list of changes is: css support ruby-position , ruby-align have been added , available default ( bug 1055676 , bug 1123917 , bug 1039006 ). the :unresolved pseudo-class has been implemented custom elements ( bug 1111633 ). the predefined style ethiopic-numeric uses space, instead of dot, suffix match recent change spec ( bug 1120721 ). css transitions on generated content (with ::before , ::after ) on both inline , block splits them start expected specification ( bug 1110277 ). the implementation of css logical properties made big progress. [...] how css transitions start has been modified match recent change of specifications, aiming @ having interoperable behavio
Read more

javascript - Complex json ng-repeat -

-
i try ng-repeat on object, tried several times still stuck. if have idea, , if it's possible share tips kind of situation. [ { "abonnement": { "id": "1", "nom": "bas prix", "tarif": "2.49", "communication": "2h de communication", "vers": "vers fixes et mobiles", "zone": "zone nationale" } }, { "abonnement": { "id": "2", "nom": "national", "tarif": "9.99", "communication": "t\u00e9l\u00e9phonie et sms illimit\u00e9s", "vers": "vers fixes et mobiles", "zone": "zone nationale" } }, { "abonnement": { "id": "3", "nom": "euro", "tarif&
Read more

jquery - Cloning of rows and columns from the old table into the new with colSpan and rowSpan -

-
i using clone jquery. necessary clone gray area in new table. problem cloned rows , columns can has rowspan , colspan. the gray area intersection data-fix-cols , data-fix-rows. my solution not work: <table id="old-table" data-fix-cols='3' data-fix-rows='4'> <tbody> <tr> <td class="gray">clone me</td> <td colspan="2" rowspan="2" class="gray">clone me</td> <td>ashgabat</td> <td>barcelona</td> <td>berlin</td> </tr> <tr> <td rowspan="3" class="gray">clone me</td> <td>bucharest</td> <td>warsaw</td> <td>washington</td> </tr> <tr> <td class="gray">clone me</td>
Read more