Remove Padding for Full Width Slideshow on Supply Template

Hey, really struggling to figure out how to make page content full width on supply template, specifically the slideshow block. As you can see on the image there is padding on the left and right of the slideshow, that’s what I am trying to remove completely. 

I’m currently using custom css on this page to remove header, footer, mobile.bar; change background; and to add buttons on images… so that I can repurpose this as a landing page while keeping the format of supply theme on the rest of my site….

Any suggestions on either making the slideshow specifically full width / no padding or remove padding from this entire page?

Below is the CSS currently used:

<style>
  #header, #footer, #mobile.bar {
display: none !important;}
</style>

<style>
#main {
    margin-left: 0;
    height: auto;
}
</style>

<style>
  #main {background-color: #E4D5A0; width: 100% !important;}
body {background-color: #E4D5A0;}
#canvas {background-color: #E4D5A0;}
</style>

Adding the code below almost worked, but no matter what I still end up with a small bit of padding on the right of the image… Also, if anyone knows how to change the slideshow height, I’d like to make it shorter. 

<style>
#block-yui_3_17_2_1_1644886214638_5303 
{margin-top:-10px; 
margin-right: -80px;
margin-left: -80px;
margin-bottom:-15px; 
z-index:99;}
</style>

Hi. Can you share link to page in screenshot? We can check easier

Thank you! Yes the link is here … I have been able to get the margin smaller but it’s still there and also I am now overlapping the header onto the image, but I still have a small margin on the bottom and right of image when the page loads - as seen in the image attached. 

The css I am using for this page is as follows: 

<style>
  /*NO MARGINS SLIDESHOW BLOCK*/
#block-9beb4ff24a2ef69bc423
{margin-top:-70px; 
margin-right: -80px;
margin-left: -80px;
margin-bottom:-70px; 
z-index:1;}
</style>

<style>
/*CHANGE BUTTON FOR SLIDESHOW ONLY*/
#block-9beb4ff24a2ef69bc423
a strong em {
  background-color: #66000000;
  border: 2px solid #FFF;
color: #FFF
  
}
  
a:hover strong em {
  background-color: #FFF !important;
  font-style: normal;
  color: #000000 !important;
  -webkit-transition: .2s; /* Safari prior 6.1 */
  transition: .2s;
}
</style>

<style>
/*REMOVE HEADER FOOTER MOBILE BAR*/
 #footer, #mobile.bar {
display: none !important;}
</style>

<style>
/*CORRECT PAGE MARGINS*/
#main {
    margin-left: 0;
    height: auto;
}
</style>

<style>
/*CHANGES BACKGROUND COLORS*/
  #main {background-color: #66000000; width: 100% !important;}
  #header {background-color: #66000000;}
body {background-color: #66000000;}
#canvas {background-color: #66000000;}
</style>

<style>
body#block-9beb4ff24a2ef69bc423 !important .header-announcement-bar-wrapper {position: absolute !important;}
</style>

On 3/9/2022 at 3:57 AM, ctohme said:

Thank you! Yes the link is here … I have been able to get the margin smaller but it’s still there and also I am now overlapping the header onto the image, but I still have a small margin on the bottom and right of image when the page loads - as seen in the image attached. 

The css I am using for this page is as follows: 

<style>
  /*NO MARGINS SLIDESHOW BLOCK*/
#block-9beb4ff24a2ef69bc423
{margin-top:-70px; 
margin-right: -80px;
margin-left: -80px;
margin-bottom:-70px; 
z-index:1;}
</style>

<style>
/*CHANGE BUTTON FOR SLIDESHOW ONLY*/
#block-9beb4ff24a2ef69bc423
a strong em {
  background-color: #66000000;
  border: 2px solid #FFF;
color: #FFF
  
}
  
a:hover strong em {
  background-color: #FFF !important;
  font-style: normal;
  color: #000000 !important;
  -webkit-transition: .2s; /* Safari prior 6.1 */
  transition: .2s;
}
</style>

<style>
/*REMOVE HEADER FOOTER MOBILE BAR*/
 #footer, #mobile.bar {
display: none !important;}
</style>

<style>
/*CORRECT PAGE MARGINS*/
#main {
    margin-left: 0;
    height: auto;
}
</style>

<style>
/*CHANGES BACKGROUND COLORS*/
  #main {background-color: #66000000; width: 100% !important;}
  #header {background-color: #66000000;}
body {background-color: #66000000;}
#canvas {background-color: #66000000;}
</style>

<style>
body#block-9beb4ff24a2ef69bc423 !important .header-announcement-bar-wrapper {position: absolute !important;}
</style>

It looks like you solved?

Hey Im trying to use this code for my site as well but i keep getting syntax errors. Do i need to use code injection in the footer section or something or is this meant to go just into the css box?

On 5/20/2022 at 7:01 AM, izzisbeads said:

Hey Im trying to use this code for my site as well but i keep getting syntax errors. Do i need to use code injection in the footer section or something or is this meant to go just into the css box?

 

Add that to Home > Settings > Advanced > Code Injection > Header or FOoter

oh yes thank you! sorry very new to this.