Jump to content

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

Recommended Posts

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

 

Link to comment
  • Replies 8
  • Created
  • Last Reply

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.

Link to comment
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

 

 

 

Link to comment
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
}

Link to comment
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.

Link to comment
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 🙂 

Link to comment
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

Link to comment

Archived

This topic is now archived and is closed to further replies.

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