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

Remove Padding for Full Width Slideshow on Supply Template


ctohme

Question

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>

C8AE9601-619B-4960-9C26-ADC2BF713897.jpeg

Link to comment
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

7 answers to this question

Recommended Posts

  • 0

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>

5BF959C5-8444-41D2-BE22-F892BE83DE5D.thumb.jpeg.9b5c93942e4ef6c289f5f878e7f2d4c7.jpeg

 

Link to comment
  • 0

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>

4433F517-2921-4A07-AE5B-5C298EB638A6.jpeg

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

4433F517-2921-4A07-AE5B-5C298EB638A6.jpeg

It looks like you solved?

image.thumb.png.791b2d960c0c3fe10e55a8ad9e991fef.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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?

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...