[tashitendrelParticipant]

Hello,

I was trying to find some sollution on the forum to present Recent posts (images from portfolio) in uncropped version, but the additional functions proposed before either didnt work for me or were not changing anything.
My goal is to have recent works showing the full image.

So I have tried to do it with Envira gallery and right now I have both versions on the home page to compare: wildlotusart.com

The images are linked to the portfolio items pages. Would it be possible to add some more styling and functionality to them:
– add the same border as on the Renew recent posts thumbnails or portfolio?
– add a hover so that it is more apparent that images are in fact linked to portfolio pages?
– add a title and date???

thank you

[Rue NelModerator]

Hi There,

Thanks for writing in!

To change the recent post image and display the full image without being cropped, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-recent-posts .x-recent-posts-img {
    background-size: contain;
}

1] To add a border for the envira gallery, you can make use of this code added in your customizer, Appearance > Customize > Custom > CSS

.envira-gallery-wrap .envira-gallery-item-inner {
    background-color: #fff;
    padding: 5px;
    border: solid 2px #e5e5e5;
}

2] To add a hover almost the same as the recent post element, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.envira-gallery-wrap .envira-gallery-item-inner .envira-gallery-link {
    display: block;
    position: relative;
}

.envira-gallery-wrap .envira-gallery-item-inner .envira-gallery-link:before,
.envira-gallery-wrap .envira-gallery-item-inner .envira-gallery-link:after {
    opacity: 0;
}

.envira-gallery-wrap .envira-gallery-item-inner .envira-gallery-link:after {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #16a085;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    z-index: 1;
    display: block;
    position: absolute;
    transition: opacity 0.5s ease;
}

.envira-gallery-wrap .envira-gallery-item-inner .envira-gallery-link:before {
    content: "\f067";
    margin: -30px 0 0 -30px;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    font-size: 32px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    z-index: 2;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    transition: opacity 0.5s ease;
}

.envira-gallery-wrap .envira-gallery-item-inner:hover .envira-gallery-link:after {
    background-color: rgba(131,134,55, 0.75);
}

.envira-gallery-wrap .envira-gallery-item-inner:hover .envira-gallery-link:before,
.envira-gallery-wrap .envira-gallery-item-inner:hover .envira-gallery-link:after {
    opacity: 1;
    transition: opacity 0.5s ease;
}

3] Adding the date and title will require custom skin development. You should try using the skin that will display the title and the date somehow the same as the recent post element.

Hope this helps.

[tashitendrelParticipant]

Thank you, I have added those codes for Envira gallery, and hover works well. However the background stretches out too much. The vertical image gets too much padding on the sides and on mobile, with one collumn, the background is fulwidth.. Is there anything that could be done about it?

Well, I dont see any additional skins in the gallery settings. I guess the version we have in X is limited to basics.

[tashitendrelParticipant]

Maybe there is a way to make the hover pick up the image title from the link or image description? So it would look like the hover in the portfolio?

[Rue NelModerator]

Hello Again,

Thanks for the updates! I am glad it works out for you. When you have a one column, the empty spaces on the left and right is normal specially if your image is smaller. That is because the width of the container is wider than the image. And in order to resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.envira-gallery-wrap .envira-gallery-public.envira-gallery-css-animations .envira-gallery-item img {
    min-width: 100%;
}

Hope this helps.

[tashitendrelParticipant]

Thank you. It helped on the laptop but not on the ipad or mobile… On smaller screen it still has fulwidth containers and huge space on left and right.

[Rue NelModerator]

Hello Again,

Please have the code updated and use this instead:

@media(max-width: 979px){
  .site .envira-gallery-wrap .envira-gallery-item img {
    min-width: 100% !important;
  }
}

Please let us know if this works out for you.

[tashitendrelParticipant]

No, it doesn’t help. Also, responsiveness of that gallery is a bit strange. I looked at it on friend’s 13″ laptop and it was set to one column as if on mobiles…

[ChristopherModerator]

Hi there,

Please change number of columns under ‘Gallery Settings’ and ‘Mobile Gallery Settings’, see the attachment.

Hope it helps.

[tashitendrelParticipant]

Thank you, yes, it helped. I thought that this setting would make images stay in one row of 3 on mobiles…
thanks a lot.

If I may ask about another thing. Below I have a text in the center of section and I used left and right padding to keep it in the middle of the page. But the padding makes the text look too narrow on mobiles. Is there a way to remove padding of one section for only mobile? Or reduce it?

[ThaiModerator]

Hey There,

Could you please send us with some screenshots?

Thanks.

[tashitendrelParticipant]

Here it comes. I used 80px padding in the column, which works ok for most of the screens, but it is too much for mobiles

[ThaiModerator]

Hi There,

Please add the following CSS:

@media (max-width: 767px){
    #x-section-2 .x-column.x-sm.cs-ta-center.x-1-1 {
       padding-left: 0 !important;
       padding-right: 0 !important;
    }
}

Hope it helps 🙂

[tashitendrelParticipant]

Thank you. This help. I guess I need to remember to change the section number in case I add one in the future.

[ThaiModerator]

If you need anything else please let us know.

[Author]

Posts