Как сделать отступы?

Question

[squirtazzer]

У меня 4 Div блока. "Слиплись"
Когда делаю margin:1px следующий блок улетает сразу. Будто ему не хватает места.

Уменьшал ширину блока 33.33, до 32.333, добавлял margin:2px, все ок. Но на мобильной версии все блоки становятся 3 в ряд жутко длинные. Как это можно решить?
Вот ссылка если надо

Comments

[Антон Антон]

Не делать себе мозг, а сделать это гридом https://play.tailwindcss.com/nAKfGkDDAY

[squirtazzer]

Антон Антон, у меня шаблон, там блоки.В которые просто вводишь картинку, ссылку, кнопку и все. А при условии что таких блоков будет еще очень много то, проще через них

[Антон Антон]

Ну тогда calc в помощь

Answer 1

[ThunderCat]

на среднем размере сделать 2 блока в ряд, а на мобиле по 1, все в столбик.

Answer 2

[AvramenkoS]

.one-fourth.mcb-wrap {
    width: calc(25% - 10px);
    margin: 0 auto;
}

Comments

[squirtazzer]

Нет, на мобилке также( на пк отлично - есть оступы, но на мобилке опять все попыло.

[AvramenkoS]

@media only screen and (max-width: 767px) {
.one-fourth.mcb-wrap {
    width: 100%;
}
}

[squirtazzer]

AvramenkoS, добавил в custom сss, в самый конец,код такой получился

.one-third.mcb-wrap {
    width: calc(33% - 10px);
    margin: 5px auto 0px auto;	
		padding: 0px 0px 20px 0px;
}
	
 
.one-third.column  {
    width: 100%;
}
	
	.one-third.column {
  	width: calc(33% - 10px);
    margin: 5px auto 0px auto;
    padding: 20px 0px 0px 0px;

}
@media only screen and (max-width: 767px) {
.one-fourth.mcb-wrap {
    width: 100%;
}
}
@media only screen and (max-width: 767px) {
.one-third.column {
    width: 100%;
}
}

@media only screen and (max-width: 767px) {
.one-third.column {
    width: 100%;
}
}

@media only screen and (max-width: 767px) {
.one-third.mcb-wrap {
    width: 100%;
}
}

на мобилке все ок, но теперь на пк пропали отступы