Rows setup - Containers balance

I’m having truoble setting up a right balance between 2 containers in 2 or 3 rows.
When I have 2 or 3 rows and I want to have a checkered effect of pictures and text containers

The ROWs layout is FULL WIDTH STRETCHED.
It would look the best when pictures would touch each other with the corners just about with 1 pixel

It’s very difficuld to do it its either to much overlaying or not enough not touching.
Is there any way to fix it
I have tried also changing the balance for 48/52 % for the row and the next 52/48% but its never perfect.


http://wayair.pl/

Hi,

So you want to add a gap between the row in purpose the image are not touching? if yes, you can add a padding to the row. Here is the steps:
Edit page > Edit row > Row styles > Layout > set value Top/bottom padding text-field (you can try 10px)

Regards,
Awan

No… I want them to be touching in exactly by 1 pixel. Not overlaying. Now it looks like they look different depending on the screen size. Is it doable to have the same effect on smaller screens as well.

Hi,

Something like this http://prntscr.com/iefqli? If yes, please try to put this CSS code into Customize > additional CSS

@media only screen and (min-width: 1024px)
.sow-image-container {
    margin-left: -2px;
    margin-right: -2px;
}
@media only screen and (min-width: 1200px)
.sow-image-container {
    margin-left: -1px;
    margin-right: -1px;
}

There is much to do if you want to do that. The page is using a grid system, so when it’s displayed on a small screen, the content will display from top to bottom.

Also, I noticed that you are set a padding to this column http://prntscr.com/ieftbo to 50px for (top-right-bottom-left). Please adjust the top padding to 30px from the page builder, Edit page > edit widget column > widget styles > layout > padding

Hi

Thanks I have changed the padding for 30px
I have added that code but it says there’s a syntax error in one line.

111_cr

I am sorry, there is a missing curly brackets in the code in above. Please use this instead:

@media only screen and (min-width: 1024px){
  .sow-image-container {
    margin-left: -2px;
    margin-right: -2px;
  }
}
@media only screen and (min-width: 1200px){
  .sow-image-container {
    margin-left: -1px;
    margin-right: -1px;
  }
}

Regards,
Awan