Jump to content

Custom footer blocks - is there a way to link two blocks so they respond together?

Recommended Posts

Hi, 

I am creating a custom footer and want it to look like this. 
1103844023_Screenshot2022-02-01at19_33_18.thumb.png.9658175157c75186d52e9a52dec60ef3.png

I am designing on a 13inch screen at the moment and I haven't edited for other devices yet.

 

When I resize my browser the Instagram images and the custom button overlap and and responsive together. I am wondering if there is a way to link them together or basically stop this from happening? 

 

50804654_Screenshot2022-02-01at19_33_27.thumb.png.6d6998445e2c6ace3e5bc93cd5b094bd.png

 

The code I have currently is 

 

//Footer


//Social Icon Tab

// @luxamatravel
#block-yui_3_17_2_1_1643212297299_4524

{
  position: relative;
  z-index:2;
  left:6.9em;
  top: 0.0em;
}

//Rotate

#block-yui_3_17_2_1_1643212297299_4524

{
  writing-mode: vertical-rl;
    transform: rotate(180deg);
}

  
//instagram images 
#block-yui_3_17_2_1_1643204551067_15575
{
  padding: 5px;
   margin-left:1px;
  margin-right:1em; 
  top:13px;
  bottom:1em;
  right:0em;
  left:3.1em;
  position:relative;
  z-index:1;

}

//Privacy
#block-yui_3_17_2_1_1643204551067_41001
{
  right:50%;
  left: 50%;
  padding-bottom:1px;
  padding-top:8px;
}

//Social Icons 
#block-yui_3_17_2_1_1643733898962_12402 {right:50%;
  left: 50%;
padding-bottom:0px}

//--On Page Icons
.sqs-use--icon {fill:#3F798E!important;}
.sqs-use--mask {fill:none!important;}
.sqs-svg-icon--wrapper {border-color:none!important}

//Favicon
#block-yui_3_17_2_1_1643204551067_25302 { width: 50%;
height: 50%;
  margin-left: 40px;
  padding-top: 10px;
  padding-bottom:10px;
}

//Brand and web design by 


div#block-998919da372c25060c30
    a {  
font-family: 'Mistrully';
font-size:25px;
 }

#block-998919da372c25060c30 {
  padding-top:10px;
    padding-bottom: 3px;}

///////////

//Hide/Show on Desktop vs. Mobile

/* Hide on Mobile */
@media only screen and (max-width: 640px) {
#block
  {display: none;}
}


// hide on desktop 

/* Hide this on Tablet - Desktop */
@media screen and (min-width:768px) {
#block-yui_3_17_2_1_1643215365514_5609
{display: none;}
}



 

 

 

Link to comment
  • Replies 1
  • Views 370
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.