Jump to content

marieschultz

Member
  • Posts

    5
  • Joined

  • Last visited

Posts posted by marieschultz

  1. On 4/30/2022 at 6:23 PM, tuanphan said:

    The url doesn't work. Can you check it again?

    With above code, to change overlay color, change line 2 in this code

    /* overlay */
    .gallery-masonry-item-wrapper a:after {
        background: rgba(0,0,0,1); /* overlay color */
        content: "";
        display: block;
        position: absolute;
        height: 10%; /* overlay height */
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity ease 200ms !important;
    }

    To change caption text size, you can add this code under

    .gallery-caption-content * {
    	font-size: 10px !important;
    }

     

    Hi @tuanphan!
    On mobile captions aren't visible with this – is there a way to turn them on either as an overlay or underneath the image for mobile devices?
    Thank you!

  2. On 3/16/2022 at 10:21 AM, tuanphan said:

    Try this code for new page

    <style>
      @media screen and (max-width:767px) {
    	.gallery-masonry-wrapper.gallery-masonry-list--ready {
        height: auto !important;
    }
    figure.gallery-masonry-item {
        position: relative !important;
        width: 100% !important;
        transform: unset !important;
    }
    .gallery-masonry-item-wrapper {
        height: auto !important;
    }
    .gallery-masonry .gallery-masonry-item[data-loaded] img {
        width: 100% !important;
    }
    .gallery-masonry {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    }
    </style>

     

    Hi @tuanphan!
    This has just worked a treat to make my 4 column desktop grid a single column on mobile, but the images on mobile have no space in between (top and bottom) are you able to help?
    TIA!

    Screenshot 2022-08-04 at 7.16.03 pm.png

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.