Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 9, 2017 at 4:51 pm #775016
    greatliona

    Hi there,

    I set a masonry gallery section in my website homepage.
    I found the caption and the title and description got hidden, when
    the monitor width is lower than 528px
    Please take a look for me.
    The first masonry part and one can see the problem by simply reduce the window width,
    I hope it can display as the same as that on laptop screen width
    Thank you all!

    • This topic was modified 7 years, 8 months ago by greatliona.
    April 9, 2017 at 5:29 pm #775035
    Jordan Shannon

    Hey Vision,

    Add the following to quick css:

    @media only screen and (max-width: 767px) {
    .av-masonry-entry-content.entry-content{
    display:block!important;
    font-size:8px!important;
    }
    }

    Let me know if this works.

    Best regards,
    Jordan Shannon

    April 10, 2017 at 6:20 am #775271
    greatliona

    Hi, Jordan

    I applied your code and added a line-height property in it:

    .av-masonry-entry-content.entry-content{
display:block !important;
font-size:8px !important;
line-height: 8px !important;
}

    But the title of each photo is still hidden, please check my website again.
    Can u give me the selector name of the title and the gap between the title and the description, please?
    Thank you so much!

    • This reply was modified 7 years, 8 months ago by greatliona.
    April 10, 2017 at 3:32 pm #775512
    Yigit

    Hi,

    Here are the selectors

    
/* For Masonry title */
.av-masonry-entry .av-masonry-entry-title { font-size: 16px; }

/* For Masonry content */
.av-masonry-entry .av-masonry-entry-title + .av-masonry-entry-content { font-size: 12px; }

    I also attached a screenshot showing it your page looks on my iphone

    Best regards,
    Yigit

    April 11, 2017 at 10:20 am #775915
    greatliona

    Hi, Yigit.

    I’ve tried to reduce the title font-size, but somehow the titles are still hidden.
    Seems like the background image isn’t big enough to contain both the title and the content.
    Is there any way to change the image size?
    Also, can I align each image specifically, some by center, some by top and some by bottom?

    April 11, 2017 at 2:02 pm #776029
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 480px) {
.responsive #top .av-masonry-entry {
    width: 100% !important;
}}

    Best regards,
    Yigit

    April 14, 2017 at 8:41 am #777711
    greatliona

    Hi, Yigit

    I tried to reduce the padding of the div of both title and content.
    And now I can see both of them without change the format.
    Thanks!

    April 14, 2017 at 11:54 am #777773
    Jordan Shannon

    Hi,

    I am glad this was able to be solved for you. If you need additional help, please let us know here on the forums.

    Best regards,
    Jordan Shannon

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