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