Hello guys!i am building today my website but i face a 1 problem in it and i still hours and hours thinking ho to solve it but i fail:mad::mad::mad:
================
LEGEND: | ==> object note Each | sign is an object
================
My problem is i put :
Objects beside each other like: | | | | |
in my laptop browser they showed as beside each other |||||||
but in mobile app showed |||
|||
then what is the solution
my CSS body code:
Code:
body {
height:100%;
overflow:auto;
display:-webkit-flexbox;
display:-ms-flexbox;
display:flex;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
font:normal 100%/150% arial,helvetica,sans-serif;
background:url('bg.gif');
}
i try to add some new CSS:
Code:
@media screen and (min-width: 480px) {
body {
img.beside_eachother {
display: block;
margin-left: auto;
margin-right: auto
}
}
NOW code of the images:
Code:
<img class="beside_eachother" style="max-width: 100%;height: auto;" src="star.gif" border="0" width="200" height="200">
<img class="beside_eachother " style="margin-left: auto;margin-bottom: 160px;margin-right: auto;max-width: 100%;height: auto;padding-left: 15px" src="1.gif" border="0" width="100" height="100">
<img class="beside_eachother " style="margin-left: auto;margin-bottom: 160px;margin-right: auto;max-width: 100%;height: auto;padding-left: 15px" src="2.gif" border="0" width="100" height="100">
<img class="beside_eachother " style="margin-left: auto;margin-bottom: 160px;margin-right: auto;max-width: 100%;height: auto;padding-left: 15px" src="3.gif" border="0" width="100" height="100">
<img class="beside_eachother " style="margin-left: auto;margin-bottom: 160px;margin-right: auto;max-width: 100%;height: auto;padding-left: 15px" src="4.gif" border="0" width="100" height="100">
<img class="beside_eachother " style="margin-left: auto;margin-bottom: 160px;margin-right: auto;max-width: 100%;height: auto;padding-left: 15px" src="5.gif" border="0" width="100" height="100">
<img class="beside_eachother " style="margin-left: auto;margin-bottom: 160px;margin-right: auto;max-width: 100%;height: auto;padding-left: 15px" src="6.png" border="0" width="100" height="100">
<img class="beside_eachother " style="margin-left: auto;margin-bottom: 160px;margin-right: auto;max-width: 100%;height: auto;padding-left: 15px" src="" border="0" width="100" height="100">
CodingForums...
ما را در سایت CodingForums دنبال می کنید
برچسب : نویسنده : codingforums بازدید : 173 تاريخ : چهارشنبه 28 تير 1396 ساعت: 12:53