cchs

I'm looking for a solution that will enable me to either a) populate a gallery block with images pulled from google drive; or, b) embed a gallery whose images are pulled from google drive. The reason for this is because I need to allow users to upload images via a form (I have a solution for that) and store them on google drive. I want to display those same images automatically on the site. This way users can update the gallery without having to log in Squarespace. I do not want to use google photos for this. I need the images to be stored in a google database. Thanks in advance for any help/suggestions.

https://noorbeautique.com/jesse It's that brown band below the gallery image that I'm trying to eliminate. I think it's a vestige of the caption container... Thanks!

This code worked great. Combined with this code from @tuanphan to make the captions wider it was just what I needed. figcaption.gallery-caption.gallery-caption-fullscreen-slideshow { max-width: 100%; } The only remaining issue is that there is now an empty div below the slideshow where the caption used to be. Is there a way to get rid of that so the slideshow is full screen again?

Thanks Paul. What's odd is that it worked for a while and then stopped. Hopefully the fix comes soon!

Site URL: https://noorbeautique.com For some reason my Instagram block won't resize on mobile. On desktop it displays two rows of 4 items each. On mobile it should change to 2 column of four items each but instead it just shrinks down the desktop layout. On every other Squarespace site I'e built the Instagram block behaves just fine. I've troubleshooted by removing all custom CSS from the site as well as any scripts in the header, but to no avail. Does anyone have any suggestions? It's driving me insane... https://noorbeautique.com Oddly, if I scale my desktop browser to a narrow width the block reacts just fine. It's only when I'm on my actual mobile device that the bug occurs. Just in case, here is the CSS code on the site currently, though I don't think it should be affecting the IG block (again, the problem persists even with al code deleted). /**************************************/ /* MEGA MENU */ /**************************************/ .wm-mega-menu-item a , .footer-mega-menu a { background-image: unset !important; text-decoration-line: none !important; } .footer-mega-menu a, .footer-mega-menu a:link { text-decoration: none; } .footer-mega-menu a, .footer-mega-menu a:visited { text-decoration: none; } .footer-mega-menu a, .footer-mega-menu a:hover { color: red !important; } .footer-mega-menu a, .footer-mega-menu a:active { color: red; } .wm-mega-menu-item{ transition-duration: .2s !important; } /**************************************/ /* */ /* T Y P O G R A P H Y */ /* */ /**************************************/ @font-face { font-family: 'Domaine'; src: url('https://static1.squarespace.com/static/62c05fd1d8601c2f49d99648/t/62dab510c226074f13d33647/1658500368887/DomaineDispCond-Semibold.woff2'); } @font-face { font-family: 'DomaineReg'; src: url('https://static1.squarespace.com/static/62c05fd1d8601c2f49d99648/t/62e79344ea71016909886453/1659343684299/DomaineDispCond-Regular.woff2'); } h1{ font-family: Domainereg,sans-serif; font-weight: 200; color: #fff; text-align: center; font-size: 8rem !important; letter-spacing: 0px !important; line-height: 110px; text-transform: uppercase} section[data-section-id="62fddd1da31518ba7430fa95"]{ h1{ font-family: Domainereg,sans-serif; font-weight: 200; text-align: center; font-size: 9vw !important; letter-spacing: 0px !important; text-transform: uppercase} } @media screen and (max-width: 767px) { section[data-section-id="62fddd1da31518ba7430fa95"]{ h1{ font-family: Domainereg,sans-serif; font-weight: 200; text-align: center; font-size: 8rem !important; letter-spacing: 0px !important; text-transform: uppercase} } } /* ------------- TEXT -------------- */ p{ font-family: scotch-text,sans-serif; font-weight: 400; font-style: normal; } /* ------------- LIST -------------- */ .list-section-title p{ font-family: semplicitapro, sans-serif !important; font-weight: 600; font-style: normal; } .list-item-content h2{ font-family: semplicitapro, sans-serif !important; font-weight: 600; font-style: normal; font-size: 1.7rem !important; } /* - REDUCE LINE SPACE FOR SERVICES - */ #block-62fddd1d0f1bab234ac07913 p{ margin: 0px;} #block-62fddd1d8d206b1a8998ef52 p{ margin: 0px !important;} #block-62fddd1d7ac7649430488476 p{ margin: 0px !important;} #block-62fddd1d572786832ead02ee p{ margin: 0px !important;} /* - REDUCE LINE SPACE FOR SERVICES - #block-69ac4711d023abee76d0 p{ margin: 0px;} #block-yui_3_17_2_1_1658260801862_12537 p{ margin: 0px !important;} #block-yui_3_17_2_1_1658344297164_5707 p{ margin: 0px !important;} /* ----------- HERO TYPE ------------ */ hero{ font-family: scotch-text,sans-serif; font-weight: 400; color: #e5d18e; font-size:5vw; line-height: 40px !important; color:red !importaant ; } hero2{ font-family: Domaine,sans-serif; font-weight: 200; color: #fff; font-size:12vw; } hero2 em{ font-family: Domainereg,sans-serif; font-weight: 200; color: #fff; font-size:12vw; font-style: normal; } /* Adjust on mobile */ @media screen and (max-width: 767px) { hero2 em{ font-size:21vw; line-height:5rem; } } /* ---------- MENU BLURB ------------ */ blurb{ font-family: semplicitapro,sans-serif; font-weight: 200; font-size:15px; } /* Adjust on mobile */ @media screen and (max-width: 767px) { hero { font-family: scotch-text,sans-serif; font-weight: 400; color: #e5d18e; font-size:14vw; line-height:14vw; } } /* ---------- LARGE TYPE ------------ */ large{ font-family: scotch-text,sans-serif; font-weight: 300; color: #e5d18e; font-size:3vw; line-height:3.5vw; } @media screen and (max-width: 767px) { section[data-section-id="62e62f5f3e1d43db9db66cc1"]{ h4{ font-size: 16px; }}} @media screen and (max-width: 767px) { section[data-section-id="62e62f5f3e1d43db9db66cc1"]{ large{ font-size: 3rem; line-height:50px }}} section[data-section-id="62f4a94abb6a777e2c988478"]{ h1{ font-family: Domainereg,sans-serif; font-weight: 200; color: #fff; text-align: center; font-size: 5rem !important; letter-spacing: 0px !important; text-transform: uppercase} h2{ line-height:0px } } /* ------ Mobile Footer Type -------- */ @media screen and (max-width: 767px) { section[data-section-id="62f4a94abb6a777e2c988478"]{ h1{ font-family: Domainereg,sans-serif; font-weight: 200; color: #fff; text-align: center; font-size: 4rem !important; letter-spacing: 0px !important; text-transform: uppercase} }} section[data-section-id="62e68dbc9870adaf3bc3160b"]{ padding-top: 20px; } @media screen and (max-width: 767px) { section[data-section-id="62e68dbc9870adaf3bc3160b"]{ h4{ font-size: 16px; line-height: 0px; margin: 0px; }}} /**************************************/ /* DIV CLASSES */ /**************************************/ /* ---------- CENTER TYPE ----------- */ div.center { text-align: center; } .center hero2{ line-height: 10vw; text-transform: uppercase; } red{ color:red !important; } /* ---------- MENU BLURB ----------- */ div.blurb { text-align: left; line-height: 17px; } /**************************************/ /* TWEAKS */ /**************************************/ /* ---------- ROSA QUOTE ----------- */ #block-yui_3_17_2_1_1660140061613_97215{ background: white; } /* --------- HEADER IMAGE ----------- */ .header-announcement-bar-wrapper {background-image:url('https://static1.squarespace.com/static/62c05fd1d8601c2f49d99648/t/62d77273b0369268a6aa7ea3/1658286708172/header_background.jpg'); background-repeat:no-repeat; background-size:cover;background-position: center;} .header {background-color:rgba(0,0,0,0)!important} /* ----=--- HEADER BUTTON ----------- */ .header-actions-action .btn { font-family: semplicitapro, sans-serif !important; padding: 10px 18px !important; font-size: 14px !important; color: black !important; background-color: white !important; } /* ----=--- MOBILE MENU ----------- */ .header--menu-open a { font-family: Domainereg,sans-serif; font-weight: 200; color: #fff; font-size: 3rem; text-transform: uppercase} .header--menu-open .header-menu-cta a { font-size: 16px!important } .chevron{ display: none !important; border: none; } .header-menu-controls-control header-menu-controls-control--active{ text-decoration: none; } .header-menu-controls-control--active{ font-size: 20px !important; color:white !important; font-family: semplicitapro !important; font-weight: 400; font-style: normal;; } /* ------- ANCHOR BEHAVIOR ---------- */ html { scroll-behavior: smooth; } .anchor-link { scroll-margin: 360px; } /* ----=--- FOOTER LINKS ------------ */ a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } footer.sections * { text-decoration: none; background-image: none !important; } /**************************************/ /* TEMPORARY */ /**************************************/ /* Hide this on Mobile */ @media screen and (max-width:767px) { [data-section-id="62c0636e2406b51d52a4cec7"] { display: none; } } /* Hide this on Tablet - Desktop */ @media screen and (min-width:768px) { [data-section-id="62c0636e2406b51d52a4cec7"] { display: none; } }

Site URL: http://www.blackbookbar.com Squarespace's mobile information bar includes the ability to dynamically publish your business hours. What I am looking for is a way to create a similar embed on multiples pages. Basically, I want to include the business hours in the footer, but also on some select other pages. I'd love for the data that's displayed to be pulled dynamically from the business information in my account settings. This way I don't have to remember to update the hours in multiple locations each time. Anyone have thoughts on how to achieve this? Thanks!

Brilliant. Works like a charm! Thank you so much!

Sorry... It is blackbookbar.com and is currently public

This code works great by I a stumped on one thing. How do I get the buttons to display horizontally on desktop (which they are now) but stack vertically on mobile? Site is www.blackbookbar.com Thanks!