Help make the banner the same for every desktop size

[MT27]

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

[BSSCommerce-TC]

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:

[Sweans]

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

[PageFly-Richard]

Hi @MT27

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[MT27]

no change…