Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
timoneill

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

Question

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

 

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 1
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 🙂 

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0
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

 

 

 

Share this post


Link to post
  • 0
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
}

Share this post


Link to post
  • 0
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.

Share this post


Link to post
  • 0
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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...