Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • February 28, 2022 at 10:13 pm #1342609
    Sandy

    The portfolio items are not showing up. I tested with a fresh page and fresh portfolio item using images that are older and used successfully elsewhere on the website, but there was no change.

    March 1, 2022 at 5:24 am #1342640
    Nikko

    Hey m,

    Thanks for giving us admin access.
    The reason why nothing is showing in the Portfolio Grid is because the portfolio items are all in draft mode, once it is published, it should show up. :)

    Best regards,
    Nikko

    March 2, 2022 at 4:45 am #1342798
    Sandy

    Thank you Nikko! Now that they show up, how can we get the portfolio grid to look like the design, specifically:
    All portfolio items:
    – Picture zooms in and darkens slightly on hover.
    – No padding between items in a portfolio
    Feature portfolio:
    – Text and a line appear on hover (three differently styled paragraphs)
    Standard portfolio:
    – Images are alternating width grid (2 images per row).
    – Text appears on hover (one styled paragraph)

    Also there is a white gap above the Feature portfolio section, how can that be removed?

    March 2, 2022 at 4:47 am #1342799
    Sandy

    The page we’re trying to tweak has two portfolio types displayed.

    March 4, 2022 at 12:03 am #1343064
    Nikko

    Hi m s,

    Thanks, I have added this CSS code on your Quick CSS:

    .page-id-6201 #av-sc-portfolio-2 .isotope-item {
    padding: 5px;
}

.page-id-6201 #av-sc-portfolio-2 .isotope-item .image-overlay {
    background: #000 !important;
}

.page-id-6201 #av-sc-portfolio-2 .isotope-item .image-overlay-inside:before {
    display: none;
}

.grid-image.avia-hover-fx img{
    -webkit-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s;
    transition: all linear 0.2s;
}

.grid-image.avia-hover-fx{
    overflow: hidden !important;
}

.grid-image.avia-hover-fx:hover img{
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    transform: scale(1.3);
}

    As for the width, it’s not possible with portfolio grid, please try to use masonry instead.

    Best regards,
    Nikko

    March 4, 2022 at 3:59 pm #1343162
    Sandy

    Thank you! The images now zoom in and fade on hover.

    The text is still missing:
    1. Feature portfolio:
    – Text and a line appear on hover (three differently styled paragraphs)
    Standard portfolio:
    – Text appears on hover (one styled paragraph)

    2. A white gap above the Feature portfolio section needs to be removed.

    March 8, 2022 at 4:26 am #1343555
    Nikko

    Hi m s,

    I apologize for the delayed response, I have modified the CSS code with this:

    .page-id-6201 #av-sc-portfolio-2 .isotope-item {
    padding: 5px;
}

.page-id-6201 #av-sc-portfolio-2 .isotope-item .image-overlay {
    background: #000 !important;
}

.page-id-6201 #av-sc-portfolio-2 .isotope-item .image-overlay-inside:before {
    display: none;
}

.isotope-item .grid-image.avia-hover-fx img{
    -webkit-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s;
    transition: all linear 0.2s;
}

.isotope-item .grid-image.avia-hover-fx{
    overflow: hidden !important;
}

.isotope-item:hover .grid-image.avia-hover-fx img{
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    transform: scale(1.3);
}

.page-id-6201 .avia-fullwidth-portfolio .sort_width_container {
    padding: 0;
}

.page-id-6201 #av-sc-portfolio-2 .isotope-item .grid-content {
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s;
    transition: all linear 0.2s;
}

.page-id-6201 #av-sc-portfolio-2 .isotope-item:hover .grid-content {
    opacity: 1;
    visibility: visible;
}

.page-id-6201 #av-sc-portfolio-2 .isotope-item .grid-content .grid-entry-title {
    background-color: transparent;
    color: white;
}

.page-id-6201 #av-sc-portfolio-2 .isotope-item .grid-content .grid-entry-title a {
    text-decoration: none !important;
}

.page-id-6201 #av-sc-portfolio-2 .isotope-item .avia-arrow {
    display: none;
}

    Please review your site.

    Best regards,
    Nikko

    March 8, 2022 at 5:13 pm #1343692
    Sandy

    Thank you, this is helpful!

    The text is still missing:
    1. Feature portfolio:
    – Text and a line appear on hover (three differently styled paragraphs)

    March 9, 2022 at 3:11 am #1343749
    Nikko

    Hi m s,

    You’re welcome. :)
    As for the three differently styled paragraphs, the limit for portfolio grid is just two using both title and excerpt.

    Best regards,
    Nikko

    March 9, 2022 at 6:01 pm #1343880
    Sandy

    Thank you, but the title and excerpt don’t seem to be displaying as expected for the feature portfolio items.
    – The title is not displaying on top of the image. The excerpt is not displaying at all.
    – A blue arrow still displays on hover, even though it doesn’t display on hove on standard portfolio items.

    March 10, 2022 at 5:04 am #1343942
    Nikko

    Hi m s,

    I have modified the previous code and added this CSS code (just adjust the margin and font-sizes as you see fit):

    .page-id-6201 #av-sc-portfolio-1 .isotope-item .grid-content .entry-title {
    font-size: 64px !important;
    margin-bottom: 28px;
}

.page-id-6201 #av-sc-portfolio-1 .isotope-item .entry-content {
    color: white;
    font-style: normal;
    font-size: 28px;
}

    Best regards,
    Nikko

    March 10, 2022 at 6:19 pm #1344044
    Sandy

    Thank you! This works really well on desktop! On mobile however, the text is too big and too much and expands outside of the image area. How can this be achieved on mobile/tablet?:
    – All portfolio items display one per row.
    – The feature portfolio excerpt is hidden.
    – The feature portfolio title is the same font size as the standard portfolio title.

    March 14, 2022 at 9:40 am #1344358
    Nikko

    Hi m s,

    I have added this CSS code:

    @media only screen and (max-width: 767px) {
  .page-id-6201 #av-sc-portfolio-1 .isotope-item .grid-content .entry-title {
    font-size: 28px !important;
    margin-bottom: 4px;
  }

  .page-id-6201 #av-sc-portfolio-1 .isotope-item .entry-content {
    display: none;
  }
}

    Best regards,
    Nikko

    March 17, 2022 at 4:36 pm #1344946
    Sandy

    Thank you very much! This works.

    March 19, 2022 at 6:28 pm #1345195
    Mike

    Hi,
    Glad Nikko was 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 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Portfolio items not showing’ is closed to new replies.