Hi @wordzebra!
There is more space after the first and last images because there are some spacer blocks added after them. If you remove those spacers, that extra space will disappear. Also, the slightly bigger space that appears after the second image compared to the third one can be removed using the code below.
@media(max-width: 1200px){
.page-id-192 .wp-block-columns {
margin-bottom: 0px !important;
}
}
Have a nice day!
Hi @luciamarinescu ,
Thank you for your answer!
It is indeed good to have some space after each picture. So instead of removing the spacers, I just added the same 40-px spacer after each picture. However, what is happening now is that on the mobile, the space is slightly bigger after the 2nd and 4th pictures than after the 1st and 3rd. Why is that? You can see this on the following test page:
https://test1.albenapetrova.com/
The original spacers were one 40-px spacer after the 1st picture, nothing after the 2nd one and one longer spacer that goes under the 3rd and 4th picture combined. You can still see that on the link I originally posted – I haven’t changed the spacers on the actual page yet.
Kind regards
Hi @wordzebra!
There is a bigger space after the second image because the first and second images are grouped together and there is an additional margin-bottom after that group. The same happens for the fourth image because the third and fourth images are also grouped and there is the same margin-bottom after that group. You can remove that extra space using the code below. For the test page, the code will look like below.
@media(max-width: 1200px){
.home .wp-block-columns {
margin-bottom: 0px !important;
}
}
For the page you provided in the original message of the thread, one selector will be different so the code will look like below.
@media(max-width: 1200px){
.page-id-192 .wp-block-columns {
margin-bottom: 0px !important;
}
}
Have a good day!
