Good day, comrades! In the course of work on the layout of the site I encountered the following problem:

There is a service block. When viewed in the configuration of a large (lg) screen, everything is displayed as intended.

But when you reduce the configuration of the screen size problems begin (md). Picture 1.

Picture 1. enter image description here

The interval appears below, with a further reduction in the size of the screen, the interval only increases (sm). When the grid transitions to (xs), the size of everything is displayed correctly, in a column.

Actually, the question is: is there a way to fill the col-sm-5 block (where the picture is contained) with a picture so that when the screen size is changed, there is no spacing below, taking into account the fullness of the next block with text? Pictures are assumed not arbitrary, but mostly near-square format. Possible binding to a well-defined picture size.

Unfortunately, there was not enough reputation to lay out the full code of the piece, I hope I put it clearly.

Thank you in advance!

    2 answers 2

    I'll try to suggest, maybe it will help ... You can trim the image with a diva (), hide part of it, but this is a bad option. It would be better to shatter the grid so that the image would jump over / under the text before the appearance of emptiness.

    <div class="col-sm-3"> <div class="col-xs-6">Ваш текст</div><div class="col-xs-6">Ваша картинка</div> </div>

    Something like this...

    • Thanks for the tip! Unfortunately, this problem did not solve, but the idea is good: D I will dig in this direction. - OldKitty

    Probably the easiest way to eliminate this defect is to disable intermediate media queries between the lg and xs styles.