Shopify themes, liquid, logos, and UX
Hi, i need help in order to make the banner on the home page have the same margin-top in every desktop screen. More specifically I am trying to put my logo inside that circle that fits into the Parthenon. But when I do it for the big screen it destroys the small screen, can you help me keep it the same for every screen size? thank you
Pass: biangu
Url: www.matibrnd.com
Hi @MT27 ,
You can follow these steps
Step 1: Go to Online store > Themes > Edit code and find base.css file
Step 2: Insert below code at the end file and Save them
img.header__heading-logo {
min-width: 150% !important;
}
Result:
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.
MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Hi @MT27 ,
check this one,.
From your Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below
.banner {
position: relative;
}
.header__heading-link a {
position: absolute;
top: 10%; /* Adjust this value to position the logo */
left: 50%;
transform: translateX(-50%);
width: 100px; /* Adjust the width as necessary */
height: auto;
}
@media (max-width: 768px) {
.header__heading-link a {
top: 15%; /* Adjust this value for smaller screens */
}
}
@media (max-width: 480px) {
.header__heading-link a {
top: 20%; /* Adjust this value for even smaller screens */
}
}
And Save.
- Please press 'Like' and mark it as 'Solution' if you find it helpful.
Regards,
Sweans
Hi @MT27
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
#Banner-template--18448488431883__0d36fe3e-71e5-4265-b621-f33e9f51b4b0::before, #Banner-template--18448488431883__0d36fe3e-71e5-4265-b621-f33e9f51b4b0 .banner__media::before {
padding-bottom: 73.542217%;
}
</style>
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
no change...
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025