CSS to set different padding for specific image blocks on mobile and non mobile

Hi,

I'm just trying to play about with changing the padding on two image blocks in my footer so that I have more control over their sizes in both desktop and mobile view:

This is the current CSS I'm currently using but I'm not sure it's laid out correctly and could use some refinement:

<style>
/*set padding to both logos for NON mobile devices*/
@media screen and (min-width:640px)
  #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
    padding:0px; !important;
}
</style>

<style>
/*set padding to both logos for MOBILE devices*/  
@media screen and (max-width:640px)
  #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
    padding:30%; !important;
}
</style>

Many thanks, Tim

Hi Will you please share your website link so we can have a look.

https://lanternfish-salamander-gp6n.squarespace.com/

Access password is: AP5draftw3b!

Thanks, Tim

Thank , Just had a look at it , your code missing few things Please use the code like below.

/*set padding to both logos for NON mobile devices*/
  #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
    padding:0px; !important;
}

/*set padding to both logos for MOBILE devices*/  

  @media screen and (max-width:640px){

    #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
      padding:30%; !important;
  }

}

You have to use this Code in Custom Css you can add it here , Home >Design >Custom Css.

Hope it helps.

1 hour ago, humxahafeex said:

Hi Will you please share your website link so we can have a look.

21 minutes ago, humxahafeex said:

Thank , Just had a look at it , your code missing few things Please use the code like below.

/*set padding to both logos for NON mobile devices*/
  #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
    padding:0px; !important;
}

/*set padding to both logos for MOBILE devices*/  

  @media screen and (max-width:640px){

    #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
      padding:30%; !important;
  }

}

You have to use this Code in Custom Css you can add it here , Home >Design >Custom Css.

Hope it helps.

Hi,

Thanks for this, because I already have some custom CSS when I add your above code underneath I get a syntax error but I'm unable to see on what line.

This is the code I already have:

//Transparent Header
body:not(.tweak-transparent-header) .black-bold .header-announcement-bar-wrapper {
    background-color: rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px)
}

.sqs-block-html a {background-image:none!important}

Many thanks for your help,

Tim

3 minutes ago, timoneill said:

 

Hi,

 

Thanks for this, because I already have some custom CSS when I add your above code underneath I get a syntax error but I'm unable to see on what line.

This is the code I already have:

//Transparent Header
body:not(.tweak-transparent-header) .black-bold .header-announcement-bar-wrapper {
    background-color: rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px)
}

.sqs-block-html a {background-image:none!important}

 

 

Many thanks for your help,

Tim

 

 

 

You MISSED semi clon in last line :

body:not(.tweak-transparent-header) .black-bold .header-announcement-bar-wrapper {
    background-color: rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px) <<HERE
}

7 minutes ago, humxahafeex said:

You MISSED semi clon in last line :

body:not(.tweak-transparent-header) .black-bold .header-announcement-bar-wrapper {
    background-color: rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px) <<HERE
}

Hi,

Still getting a syntax error; this is the complete CSS:

/*Transparent Header*/
body:not(.tweak-transparent-header) .black-bold .header-announcement-bar-wrapper {
    background-color: rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
/*Remove Link underlining*/
.sqs-block-html a {background-image:none!important}

/*set padding to both logos for NON mobile devices*/
  #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
    padding:0px; !important;
}

/*set padding to both logos for MOBILE devices*/
  @media screen and (max-width:640px){

    #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
      padding:30%; !important;
  }

}

Thank you once again for your help.

31 minutes ago, timoneill said:

Hi,

 

Still getting a syntax error; this is the complete CSS:

/*Transparent Header*/
body:not(.tweak-transparent-header) .black-bold .header-announcement-bar-wrapper {
    background-color: rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
/*Remove Link underlining*/
.sqs-block-html a {background-image:none!important}

/*set padding to both logos for NON mobile devices*/
  #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
    padding:0px; !important;
}

/*set padding to both logos for MOBILE devices*/
  @media screen and (max-width:640px){

    #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
      padding:30%; !important;
  }

}

Thank you once again for your help.

/*Transparent Header*/
body:not(.tweak-transparent-header) .black-bold .header-announcement-bar-wrapper {
    background-color: rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
/*Remove Link underlining*/
.sqs-block-html a {background-image:none!important}

/*set padding to both logos for NON mobile devices*/
  #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
    padding:0px !important;
}

/*set padding to both logos for MOBILE devices*/
  @media screen and (max-width:640px){

    #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
      padding:30% !important;
  }

}

USE the above code it's error free now If this answers the question don't forget to Mark it as Solved by Clicking arrow on top left of this answer 🙂 

15 minutes ago, humxahafeex said:

/*Transparent Header*/
body:not(.tweak-transparent-header) .black-bold .header-announcement-bar-wrapper {
    background-color: rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
/*Remove Link underlining*/
.sqs-block-html a {background-image:none!important}

/*set padding to both logos for NON mobile devices*/
  #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
    padding:0px !important;
}

/*set padding to both logos for MOBILE devices*/
  @media screen and (max-width:640px){

    #block-yui_3_17_2_1_1583604405086_50557,#block-yui_3_17_2_1_1583519438823_33740  {
      padding:30% !important;
  }

}

 

USE the above code it's error free now If this answers the question don't forget to Mark it as Solved by Clicking arrow on top left of this answer 🙂 

Hi, brilliant....that works well....that lets me play about with the padding to get it looking correct.

Oh, I did raise a related question on the forum related to the same footer blocks as in whether there was a way to arrange the blocks differently on mobile view.  If you get a chance, you should be able to find that query under my name.

In any respect, I'll mark this one as solved. 

Many thanks, Tim