Мой Instafeed отображается как одна строка на моем мобильном телефоне, но я хочу, чтобы он отображался как 3 строки и 2 столбца вместо одного столбца с 5 сообщениями. Как я могу пойти по этому поводу? Я пытался использовать? Помощь будет принята с благодарностью. это то, как мой канал Instagram выглядит в настоящее время на мобильном телефоне , а это - это то, как я хочу, чтобы оно отображалось на мобильном телефоне.
CSS:
#instafeed .instagram__item {
position: relative;
margin-bottom: 20px;
}
.instagram__item:after {
content: "";
display: block;
padding-bottom: 100%;
}
.instagram__link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.instagram__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
}
.instagram__video-link {
&:after, &:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
}
&:after {
width: 0;
height: 0;
border: 16px solid transparent;
border-left: 20px solid #fff;
margin-top: -18px;
margin-left: -7px;
-webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.25));
}
&:before {
margin-top: -34px;
margin-left: -34px;
width: 60px;
height: 60px;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 4px rgba(black, 0.18);
background: rgba(black, 0.42);
transition: background 0.3s ease;
}
&:hover {
&:before {
background: rgba(black, 0.7);
}
}
}
.social-feeds-wrap {
.sixteen {
.columns:nth-child(4n + 1){
margin-left: 0;
}
.columns:nth-child(4n + 4){
margin-right: 0;
}
}
.eight {
.columns:nth-child(odd){
margin-left: 0;
}
.columns:nth-child(even){
margin-right: 0;
}
}
}