Removing padding above and below an image in custom liquid code.

[Davieholt]

Hi, here is my link to the store.

tasteinmusic.store/collection/taylors-collection

I am having trouble removing the padding above and below the image. the blue for the custom liquid code. for the banner image i have created an implemented using custom liquid code. here is my code. 

<!-- Custom Banner Section -->
<div class="banner-section">
<img src="https://cdn.shopify.com/s/files/1/0654/1226/8183/files/Untitled_design_7.png?v=1723346593" alt="Banner Image" class="banner-image">
<div class="banner-text-wrapper">
<div class="banner-text">Shop Our Collection Of Premium Taylor Swift Posters</div>
<a href="#MainContent" class="btn-buy-now">Buy Now</a>
</div>
</div>

<style>
/* Reset all margins and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Ensure the body and html have no margin or padding */
html, body {
margin: 0;
padding: 0;
height: 100%;
}

/* Banner Section */
.banner-section {
position: relative;
width: 100%;
overflow: hidden;
background-color: transparent; /* Ensure no background color is showing */
padding: 0; /* Remove any padding */
margin: 0; /* Remove any margins */
display: block;
}

/* Banner Image */
.banner-image {
width: 100%;
height: auto; /* Maintain the aspect ratio */
display: block;
margin: 0; /* Remove any margins */
padding: 0; /* Remove any padding */
position: relative; /* Ensure no extra space around the image */
}

/* Banner Text Wrapper */
.banner-text-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: rgba(255, 255, 255, 0.5); /* Slight background for text contrast */
}

/* Banner Text */
.banner-text {
color: #ff6f61;
font-size: 28px;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
padding: 12px 20px;
background: rgba(255, 255, 255, 0.7);
border-radius: 8px;
text-align: center;
}

/* Buy Now Button */
.btn-buy-now {
margin-top: 20px;
padding: 16px 40px;
background-color: #ff6f61;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
border-radius: 8px;
font-size: 20px;
text-align: center;
}

/* Button Hover Effect */
.btn-buy-now:hover {
background-color: #e05b4f;
color: #FFFFFF;
}

/* Responsive Design */
@media (max-width: 768px) {
.btn-buy-now {
padding: 14px 35px;
font-size: 18px;
}

.banner-text {
font-size: 22px;
padding: 10px 18px;
}
}

@media (max-width: 480px) {
.btn-buy-now {
padding: 12px 30px;
font-size: 16px;
}

.banner-text {
font-size: 20px;
padding: 8px 16px;
}
}

/* Smooth Scrolling */
html {
scroll-behavior: smooth;
}
</style>

[niraj_patel]

Hello @Davieholt 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
  .section-sections--17242064158871__custom_liquid_P4rBzJ-padding {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[BSS-TekLabs]

Do you want like this @Davieholt 

[BSS-TekLabs]

- Here is the solution for you @Davieholt 
- Please follow these steps:

 

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.section-sections--17242064158871__custom_liquid_P4rBzJ-padding {
 padding: 0 !important
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.