4 picture in a row with left and write padding

this is my Advance Layout for it:

• give a custom class to the color section f.e. : four-in-a-row
• you can put as many 1/4 Containers in it you like.
• BUT: ever first 1/4 column in it – you had to set the no-margin ( no space between the columns) option again
• The Containers 1/4 : no distance but indivual height
• put in each 1/4 container an image , a heading , a textblock
• the images are pure images – you can animate them if you like
• the images should have the same dimensions!

put this to your quick css:

.four-in-a-row .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.four-in-a-row .entry-content-wrapper:before,
.four-in-a-row .entry-content-wrapper:after,
.four-in-a-row .entry-content-wrapper .flex_column:before,
.four-in-a-row .entry-content-wrapper .flex_column:after {
  display: none
}

.four-in-a-row .entry-content-wrapper .flex_column {
  float: none;
  width: unset !important;
  padding: 0;
  margin: 0;
  flex: 0 1 25%;
  display: inline-flex;  /***  the flex-item itself is a flex-container too ***/
  flex-flow: column wrap;
  justify-content: stretch;
}

.four-in-a-row .entry-content-wrapper .flex_column .av-special-heading {
  padding: 0 !important;
  margin: 0; 
}

.four-in-a-row .entry-content-wrapper .flex_column .av-special-heading,
.four-in-a-row .entry-content-wrapper .flex_column .av_textblock_section  {
  padding: 5px 20px !important;
}

@media only screen and (max-width: 989px) {
  .four-in-a-row .entry-content-wrapper .flex_column {
    flex: 0 1 33.33%;
  }
}

@media only screen and (max-width: 767px) {
  .four-in-a-row .entry-content-wrapper .flex_column {
    flex: 0 1 50%;
  }
}

@media only screen and (max-width: 480px) {
  .four-in-a-row .entry-content-wrapper .flex_column {
    flex: 1 1 100%;
  }
}

if you like to start with 6 images in a row – no problem :
start with
flex: 0 1 16.66%;

see result: https://webers-testseite.de/4inarow/

Use instead of the img container a code block alb. Why – are these svgs you want to use as inline svg with inside animations / hover states etc ?
if they all got the same view-box size ( or at least the same aspect ratio ) this could be done.
But to speculate further here would be unproductive. Either show what kind of “images” you are talking about, or a link to the corresponding page.

See Testpage again with ( now sorry they do not have the same size as the images ) : https://webers-testseite.de/4inarow/
hover the svgs

2. pictures have 0 padding & margin. BUT have a 50px left and right padding to the parent container.(again exactly like the website I mentioned above)

i do not see that on the image in your example page – as on my test page too

Have you thought about editing the first of the 1/4 columns of each row so that it is set to no-margin?
Unfortunately, the first in a row is always assigned the default value: “space between columns”.

Be carefull to do this each time – when you change positions in your layout ( by moving the columns e.g.)

it is because of this rule in enfold settings:

.responsive .av_one_fourth.first + .av_one_fourth.flex_column_div {
 margin-left: 4%
}

so you got two options here – either you think of that to edit each first column in that layout – or you overwrite it by:
( and that is much more comfortable )

.responsive #top .four-in-a-row .flex_column {
 margin-left: 0 !important
}

• This reply was modified 3 years, 10 months ago by Guenni007.