Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 30, 2022 at 9:53 pm #1374531
    Eleina_Shinn

    Hi, this message piggybacks on another thread about opening the team member descriptions in a lightbox, here:
    https://kriesi.at/support/topic/team-member-element-open-team-member-description-in-lightbox/

    I love the contribution by Guenni007 with CSS to open the lightbox in a horizontal format, so you can see the whole bio without scrolling down, and I’ve used it on this site: http://vac.eswebsitedesign.com/our-team/.

    The only problem is that the.team-member-name is not going below the picture, it’s beginning at the top and to the right, like it’s wrapping around the picuture – which is great in the lightbox, but not on the element on the page. I tried making the text smaller, but that didn’t help. Here’s a screenshot: https://nimb.ws/3k21Fz. The image also isn’t taking up the whole column space. You’ll see that the row underneath has team images without the class .white-popup and the images take up all space with name underneath – need the .white-popup images above to do the same thing. Would that be possible?

    This is the css from the thread mentioned above:
    .mfp-content {
    display: inline-flex !important;
    }

    .white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 800px;
    margin: 20px auto;
    }

    .white-popup .team-img-container {
    max-width: 300px;
    float: left;
    margin: 0 20px 10px 0
    }

    December 1, 2022 at 4:36 am #1374551
    Ismael

    Hey Eleina,

    Thank you for the inquiry.

    We can’t reproduce the same issue on our end. The title of the items stays below the image as shown in the screenshot below.

    Screenshot: https://1drv.ms/u/s!AjjTfXSRbKTvz074KeJ6MYDpa4cD?e=qJttkd

    Did you fix the layout issue?

    Best regards,
    Ismael

    December 1, 2022 at 5:11 pm #1374681
    Eleina_Shinn

    I actually didn’t, it still looks the same on my end. I pulled up in two broswers Chrome and Edge – both show just like the screenshot I sent you… that’s weird.

    December 2, 2022 at 7:38 am #1374722
    Ismael

    Hi,

    Does it work when you adjust the float property from left to none in the following css rue?

    .white-popup .team-img-container {
   max-width: 300px;
   float: left;
   margin: 0 20px 10px 0
}

    Try to replace it with this css.

    .white-popup .team-img-container {
   max-width: 300px;
   float: none;
   margin: 0 20px 10px 0
}

    Best regards,
    Ismael

    December 2, 2022 at 4:51 pm #1374807
    Eleina_Shinn

    Hi Ismael,

    1) It did work to place the team member name below the picture on the page itself, which is awesome, but it changes the pop up to vertical with the name underneath as well, so it doesn’t have that nice horizontal layout with text wrapping around the photo, which allowed the pop up to be fully visible.

    2) And the team member picture still isn’t taking up the full width of the column like the photos in the next row which do not have this css class. (I tried increasing the size of the max width, but that didn’t help.

    So now the popup looks like this: https://nimb.ws/83T5Hw
    And it really looked better like this: https://nimb.ws/ueMwY7

    So the upshot is that the css effects both what is on the page, and the popup, so it appears the css needs to be separated.

    I so appreciate your help. If you feel this isn’t possible, I could just go back to the vertical pop up, or use a pop up plugin. Just let me know what you think after taking another look.

    Thanks again!

    ~e

    December 3, 2022 at 11:15 pm #1374962
    Mike

    Hi,
    Thank you for your patience and the login I changed the h3.team-member-name css to include float:left; and added css to remove the float when it is a popup:

    h3.team-member-name {
	font-size: 18px;
  float: left;
}
.mfp-content h3.team-member-name {
  float: none;
}

    so now before popup it is like this:
    2022-12-03_005.jpeg
    and when poped up it is like this:
    2022-12-03_006.jpeg
    please clear your browser cache and check.

    Best regards,
    Mike

    December 6, 2022 at 8:13 pm #1375271
    Eleina_Shinn

    Hi Mike, that looks great, thank you!

    I feel like such a pain in the butt, but wondered if you could help me with one final thing! ( I appreciate your patience)

    You might notice that these 3 team members are not taking up much space on the page, the pictures are much smaller than the team member pics in the row beneath them that don’t have this custom css class; and I think it’s due to the team member pic css we used for the pop up, which is also taking effect on the page itself, so the same issue really, but relating to the image vs. the name

    December 7, 2022 at 1:48 pm #1375340
    Mike

    Hi,
    I added the class .mfp-content to your css for the popup so the width is only applied when it is a popup and not on the page, please clear your browser cache and check.

    Best regards,
    Mike

    December 7, 2022 at 6:11 pm #1375404
    Eleina_Shinn

    You’re the best! It’s perfect now, and I will know how to do it next time – thank you, thank you!

    December 7, 2022 at 8:39 pm #1375434
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Team Member Description in Lightbox’ is closed to new replies.