Home Forums Aside HTML theme Only 3 portfolio images per row

This topic contains 7 replies, has 2 voices, and was last updated by  SeaTheme 3 years, 4 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #11141

    toshocorporation
    Participant
    Purchased

    Hello again,

    How can I set the images on /portfolio-grid-ajax.html to be only 3 per row and have some spacing between them?

    Thanks,

    #11142

    SeaTheme
    Keymaster
    Purchased

    Hello,

    Please change the list wrap as:
    <div class="isotope masonry isotope-liquid-list " data-space="20px" style=" margin:-20px 0 0 -20px;" data-size="large" data-width="width4" data-words="" data-social="false" data-ratio="image-thumb">
    add the padding and margin for each item:
    https://www.dropbox.com/s/12103gn8koph087/QQ20160917-1.jpg?dl=0

    #11173

    toshocorporation
    Participant
    Purchased

    Hello again,

    Thanks for the help. But I need only 3 images per row no matter the resolution. Because now on bigger resolution the images are self arranging.

    And second how can I add hover effect on images?

    Thanks,

    #11176

    SeaTheme
    Keymaster
    Purchased

    Hi, 1. did you change the code? could you please leave your page url?
    FW: what’s size of your computer screen?

    2. I don’t understand this question? If you want to change the mouseover effect css. Please find the css in css/pagebuild.css
    line 956-983:

    .brick-with-img .brick-hover:hover ~ .brick-content img,
    .isotope-liquid-list .hover-effect .brick-hover:hover img {
       -webkit-transform: scale(2);
       -moz-transform: scale(2);
       -o-transform: scale(2);
       -ms-transform: scale(2);
       transform: scale(2);
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=15)"; filter: alpha(opacity=15); opacity: .15;
    }
    .brick-with-img .brick-hover:hover.brick-hover-mask,
    .isotope-liquid-list .hover-effect .brick-hover:hover .brick-hover-mask {
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;
    }
    .brick-with-img .brick-hover:hover.brick-hover-mask .brick-title ,
    .brick-with-img .brick-hover:hover .brick-hover-mask .brick-excerpt,
    .isotope-liquid-list .hover-effect .brick-hover:hover .brick-hover-mask h3,
    .isotope-liquid-list .hover-effect .brick-hover:hover .brick-hover-mask .brick-excerpt {
    	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; top: 50%;
       -webkit-transform: scale(1) translate(0, -50%);
       -moz-transform: scale(1) translate(0, -50%);
       -o-transform: scale(1) translate(0, -50%);
       -ms-transform: scale(1) translate(0, -50%);
       transform: scale(1) translate(0, -50%);
    }
    .brick-with-img .brick-hover:hover .brick-hover-mask .brick-excerpt,
    .isotope-liquid-list .hover-effect .brick-hover:hover .brick-hover-mask .brick-excerpt {
    	 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: .8;
    }
    #11300

    toshocorporation
    Participant
    Purchased
    This reply has been marked as private.
    #11305

    SeaTheme
    Keymaster
    Purchased

    Hi, you didn’t leave your page url.

    #11340

    toshocorporation
    Participant
    Purchased
    This reply has been marked as private.
    #11342

    SeaTheme
    Keymaster
    Purchased

    Please change /js/custom.theme.isotope.js line 111 – 113:

    width = Math.floor(container.width() / 10);
    } else if (container.width() >= 1825) {
    width = Math.floor(container.width() / 12);

    update to:

    width = Math.floor(container.width() / 6);
    } else if (container.width() >= 1825) {
    width = Math.floor(container.width() /6);
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!