cchs Posted August 19, 2022 Share Posted August 19, 2022 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; } } Link to comment
Solution paul2009 Posted August 19, 2022 Solution Share Posted August 19, 2022 3 hours ago, cchs said: 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. This has been confirmed as an issue with the Instagram Block and is awaiting a fix. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
cchs Posted August 20, 2022 Author Share Posted August 20, 2022 Thanks Paul. What's odd is that it worked for a while and then stopped. Hopefully the fix comes soon! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment