با سلام و ادب
کد زیر در سایز 992 نوشته شده :
@media screen and (max-width: 992px){
#our-story{
height: 550px;
padding: 0;
}
header nav ul{
display: none;
}
.hamburger-icon{
display: block;
float: right;
}
.hamburger-icon img{
margin-top: 10px;
cursor: pointer;
}
header nav .logo{
float: left;
}
#our-story .story-desc{
width: 100%;
}
#our-story .story-img{
width: 100%;
text-align: center;
margin-top: 20px;
}
#our-story .story-img img{
width:400px;
}
#menu .menu-desc{
width: 100%;
}
#menu .menu-img{
width: 100%;
margin-top: 30px;
}
#menu .menu-desc h1{
margin-top: 0;
}
#menu .menu-img ul li{
width: 25%;
}
#menu .menu-img ul li img{
width: 200px;
}
}
تصویر زیر را نشان می دهد:
فاصله بین عکسها زیاد است و هر جقدر کوچکتر می شود به 768 نمی رسد باز عکس ها به هم میخورد مثل تصویر زیر می شود:
ممنون میشم راهنمایی بفرمایید
سلام دوست عزیز
سایز عکس هارو کوچکتر کنید
شما هر کاری کنی به صورت 100 در 100 وب سایت ریسپانسیو نمیشه
اگر منم یه جاهایی همچین کاری کردم خواستم نشون بدم میتونین انجام بدین
از قالب های بعدی هم روی 4 تا 5 breakpoint ریسپانسیو میکنیم و پیشنهاد میکنم شمام همین حالت استاندارد رو فقط کار کنین
1200 ,
992,
768,
576 یا 600
400
نهایت اگر روی 1400 هم کار کنین خوبه