Jump to content

Instagram block not resizing on mobile

Go to solution Solved by paul2009,

Recommended Posts

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
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution
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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.