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.
![Banner Image]()
Shop Our Collection Of Premium Taylor Swift Posters
Buy Now
/* 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;
}
Hello @Davieholt
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
@media screen and (min-width: 750px) {
.section-sections--17242064158871__custom_liquid_P4rBzJ-padding {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Do you want like this @Davieholt
- 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.
