SaraCreative

Hello! One specific page on my website does not work on mobile and it shows up blank. There's a grid format on that page. The Squarespace customer support said it might be the code. Can anyone tell me what's wrong with my code? Page: https://www.sarageorgas.com/portfolio CSS: /* Grid Gallery Captions on Hover */ .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(65, 82, 164,1); // overlay color height: 100%; padding: 0; opacity: 0; pointer-events: none; } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; // center vertically justify-content: center; // center horizontally } .gallery-grid .gallery-caption-content { font-size: 2rem !important; // caption font size color: white; //caption font color padding: 5vw; // padding around the caption } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; max-width: unset; } // THIN BUTTON OUTLINE .sqs-block-button-element--medium { border-width: 1px !important; } @media screen and (max-width:800px) { .gallery-grid-wrapper { grid-template-columns: repeat(1,1fr) !important; grid-row-gap: 3vw !important; } } // PREVENT OVERFLOW body { overflow-x:hidden; overflow-y:visible; } @media only screen and (max-width: 1024px) { body,#siteWrapper { overflow-x:hidden; overflow-y: visible !important } }

Hello! I'm looking to build my portfolio on my homepage with projects. How can I use one of these images and connect it to a project I created on another page? Is that possible? If not, how would I go about making a portfolio with image hovers on my homepage?

I am working on a site and need to display the desktop version of the image and hide the mobile version, then have it change once it becomes mobile to the new image. I saw a post that said to use this code but I am having a hard time getting it to work. What block id should I be using and is there any other coding I need to add? (am somewhat of a code newbie) @mobile: ~"only screen and (max-width: 640px)"; @desktop: ~"only screen and (min-width: 900px)"; @media @mobile {#block-yui_replacewithblockidofLargeimage { display: none;}} @media @desktop {#block-yui_replacewithblockidofSmallimage { display: none;}}