Grid row columns padding on mobile device

This is how i need it to be in mobile view (link below).

Jacob

Hi
No the link i posted is of a psd-document and shows how i whant it to look like on a mobile device. The space between the text and the image is ideal. When i use grid row (one column 2/3 with image and one 1/3 with text) it looks stellar on a computer but when i use mobile view, there is a huge white space between the text and the image above the text. This has forced me to use colour section
and text columns instead, this way the image doesnt go fullwidth. Looks ok but not ideal. I would like the image to be fullwidth. I read something about flex columns. I can rearrange the layout so you can check it out if that helps.

Jacob

Hiya
That worked like a charm on mobile devices (vertically). Is there a similar code i can use for tablets? Both horisontal and vertical please.

Thank you both for the help. It worked fine until i persuaded myself i needed a child theme (due to the many changes i had to do). Now it stopped working. The new code is still in the mother themes custom css (i imported settings to the child) but the effect is gone. Should i paste the code somewhere else or change it somehow?

Jacob

I used your code in custom css (below) and it worked. Then i installed a child theme and it stopped working.

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .flex_column.avia-builder-el-2,
.responsive #top #wrap_all .flex_column.avia-builder-el-9 {
width: 124%;
margin-left: -2em;
}
}