• Resolved wordzebra

    (@wordzebra)


    On the desktop it looks great, but if you scroll down on the mobile phone, you will notice that the space left after each of the four sections (Body, Landscape, Watercolour and so on) is not equal. What is the reason for that and how to fix it? I replaced each of the four pictures with equally large ones (600×600), so theoretically nothing should have changed.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • luciamarinescu

    (@luciamarinescu)

    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!

    Thread Starter wordzebra

    (@wordzebra)

    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

    luciamarinescu

    (@luciamarinescu)

    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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Space left after sections is unequal’ is closed to new replies.