Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 2, 2017 at 6:35 pm #786620
    thomas6602

    Hi,
    I have a masonry gallery on my index page. On the tablet and smartphone the title and excerpt is permanently displayed (no hover effect). If the title and excerpt is a bit long, you almost can not see the picture anymore.
    Is it possible with CSS – on the tablet and smartphone – to place the text/box below the image?

    look here:

    Home

    Thank you for your reply.

    May 2, 2017 at 8:49 pm #786691
    Victoria

    Hey thomas6602,

    Well, moving the captions down would be a bit tricky, here is an alternative solution, that you might consider. This is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .main_color .container .av-inner-masonry-content, 
  #top .main_color .container .av-masonry-load-more, 
  #top .main_color .container .av-masonry-sort,
   .main_color .container .av-masonry-entry .avia-arrow {
    background-color: rgba(248, 248, 248, 0.6);
  }
  .av-fixed-size .av-masonry-entry .av-inner-masonry-content, 
  .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
    left: 0;
    padding: 10px;
  }
  .main_color .site-background {
        color: #2d2b2b;
  }
  .av-masonry-entry .av-inner-masonry-content {
    padding: 10px;
    font-size: 13px;
  }
}

    Let us know what you think.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    May 3, 2017 at 4:56 pm #787241
    thomas6602

    Hi Victoria,
    Thanks for your support! Transparency was also my first thought. … but in my attempt the text was also transparent! :)

    A small problem there is still: The arrow has become a Qadrat through transparency! Probably difficult to solve. Can the arrow (square) be completely deleted or set to 100% transparency? Not tragic if it does not work.

    Best regards,
    Thomas

    Home

    May 4, 2017 at 5:54 am #787586
    Rikard

    Hi Thomas,

    Please try the following CSS as well to hide it for mobile sizes:

    @media only screen and (max-width: 767px) {
.av-inner-masonry-content-pos-content .avia-arrow {
  display:none;
}
}

    Best regards,
    Rikard

    February 1, 2021 at 3:13 pm #1276842
    HuxburyQuinn

    FEB 2021
    Masonry Gallery – Image caption “title” below the image element.
    We see 100% height of the image and the caption does not hide or overlay on the bottom of the image.

    Solution I have just implemented – thought I would share.

    Masonry Gallery – Caption – Display Title
    Default Display (at the bottom of the elements image)
    Always Display

    Column Responsiveness Set: 3 Column | 2 Columns | 1 Column | 1 Column

    Then add the following to the Quick CSS

    #top .av-inner-masonry {overflow:visible;}

.av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry { bottom:100px;}

.av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {bottom:-50px;}

.av-masonry-entry .av-inner-masonry-content {padding:10px 20px; height:50px;}

 .responsive #top #wrap_all .all_colors h3.av-masonry-entry-title {font-size:26px; } 

.main_color .av-inner-masonry-content.site-background {background:transparent;}

    To resize the h3 title responsively use responsive css media styles – add the following at the top of your QUICK CSS

    @media screen and  (max-width: 460px) {
.responsive #top #wrap_all .all_colors h3.av-masonry-entry-title {font-size: 14px !important;}
}

@media only screen and (min-width: 768px) and (max-width: 988px) {
.responsive #top #wrap_all .all_colors h3.av-masonry-entry-title {font-size: 18px !important;}
}

    3 column font size = 26px
    2 column font size = 18px
    1 column font size = 26px
    1 column (viewport width smaller than 460px wide) font size = 14px

    height, bottom negative margin should be the same value.
    Css – vary height, bottom negative margin and font size according to your longest headline.

    I hope this helps someone else.

    Cheers : )

    February 2, 2021 at 11:05 am #1277059
    Rikard

    Hi @HuxburyQuinn,

    Thanks for sharing, it’s much appreciated :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.