Help make the banner the same for every desktop size

Help make the banner the same for every desktop size

MT27
Pathfinder
170 6 16

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

MT27_0-1721233725514.jpeg

 

 

Replies 4 (4)

BSSCommerce-TC
Shopify Partner
225 49 51

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: 

BSSCommerceTC_0-1721236539169.png

 

 

BSSCommerceTC_1-1721236549261.png

 

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


BSS Commerce - Full-service eCommerce Agency

Sweans
Shopify Partner
429 89 129

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

PageFly-Richard
Shopify Partner
5011 1120 1805

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>

PageFlyRichard_0-1722413810140.png

 

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.

MT27
Pathfinder
170 6 16

no change...

MT27_0-1722518912034.png