Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #1275874

    Hi There,
    can you tell me how can I have 4 pictures in a raw with no padding between them? also, I don’t want them to get the whole width of my website and they should have a little padding from edges of my screen. Exactly like team member pictures in this website
    https://sidlee.com/en/about
    (Please keep in mind that for mouseover effect I needed to use code block instead of image element)
    Thanks

    #1276242

    Hey hooman80,

    The closest thing to that in the theme would be the Grid Row element, please try that out.

    Best regards,
    Rikard

    #1277444

    Hi Rikard,
    I already used Grid Row. unfortunately I can’t have 4 pictures with no padding from each other without sacrificing the left and write padding from the screen. (I already designed something similar to what I need with 3 pictures in a row. but I need 4 pictures) sorry if I can’t explain it better. Please check my page for better understanding.
    I want my row looks exactly like this page team members section: https://sidlee.com/en/about

    #1277844

    Hi,

    Thanks for the update. Please add the content in 1/4 elements, inside of a Color Section, and we’ll have a look if we can give you some custom CSS to use.

    Best regards,
    Rikard

    #1278171

    Hi Rikard,
    Thanks for your reply. I just put them in color section 1/4 elements. Please check.

    #1278183

    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/

    #1278189

    Hi Guenni007,

    thanks for your advice unfortunately it couldn’t fix my problem. because I need to use codeblock instead of image element. I want my pictures to change in hover mode and image element does not give me that option.

    #1278224

    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

    #1278225

    so more and precise input for those who want and could help.

    #1278293

    Hi Guenni, sorry if you’ve got confused. let me clearly explain what I need to do:
    I want my team member pictures exactly like the page below::
    https://sidlee.com/en/about

    1. members photos change in hover. from their serious faces to funny faces.( that’s why I use code block instead of image element)
    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)

    #1278299

    My setup above – go and open the 1/4 column and set the other image as background-image – with background-repeat: contain !

    now you will have the additonal css:

    .four-in-a-row .entry-content-wrapper .flex_column:hover img {
      opacity: 0;
      transition: opacity 1s ease;
    }
    
    .four-in-a-row .entry-content-wrapper .flex_column img {
      opacity: 1;
      transition: opacity 1s ease;
    }

    and if you like to have your own cursor type – like your example-page replace that one rule with

    .four-in-a-row .entry-content-wrapper .flex_column:hover img {
        opacity: 0;
        transition: all 1s ease;
        cursor: url(/wp-content/uploads/tile-hover.png) 60 12,auto;
    }

    see first image in test page
    Then you can link the full 1/4 column to the team member page.

    #1278303

    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

    #1278317

    If you have seen that effect now – please tell – because i want to remove the images on copyright reasons

    Edit: done – i used now some images from pixabay.

    #1278404

    Hi,

    Thanks for helping out @guenni007 :-)

    Please let us know if you should need any further help on the topic @hooman80.

    Best regards,
    Rikard

    #1278453

    Hi Guenni007

    Thank you for your great help! I did those steps and the result is exactly what I expected. you’re amazing! there is only one problem still I have:
    the layout changes in width 988. how can I fix it(it can either changes to 2 picture or 4 picture format. doesn’t really matter).
    Please check the page here:
    https://lostspiritgroup.com/about-us/
    password: Hooman

    Thank you!

    #1278594

    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 2 weeks, 4 days ago by  Guenni007.
    #1281623

    Very important on flex modell use!
    every element that is inside the flex-container is part of the rules – so no additional Heading inside a 1/1 container or a hr to have more space on top or bottom ( you can do this via padding ) should be inside the flex container.

    #1282119

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1282503

    Hi @guenni007

    Thanks for your great help. still I have a problem with the code. please check our team members in the page below. can you see that little line under some pictures( for example under Angela Hadjipavlou picture). I really don’t know why it happens. all pages are exactly same size. first column margin sets on 0 and I didn’t add any other element in the color section.

    thanks in advance.

    https://lostspiritgroup.com/about/
    password: Hooman80

    #1282960

    Hi,

    Thanks for the update. The page password doesn’t seem to be working though, please post a working one, so that we can access the page.

    Best regards,
    Rikard

    #1283103

    sorry the password is : Hooman

    #1283517

    excuse me did yo have time to check it?

Viewing 22 posts - 1 through 22 (of 22 total)

You must be logged in to reply to this topic.