Resolved Logo not on the correct place mobile - tablet - computer - laptop

Hi,
May I have your site URL, please?
You may select a mobile logo from the basic settings of the template option:
https://prnt.sc/qxkg1x
If you create a custom header then you may select grid options from layout builder.
https://www.youtube.com/watch?v=bYPgWAWzXpM

Best Regards

i will give an login and link by pb. The mobile and tablet are not good aligned.


this code will not work

@media only screen and (max-width: 768px)
#sp-header .logo img {
width: 95px;
margin-left: 50px;
margin-top: 40px;
}

Is This correct or is there another way. I put this in custom css

@media only screen and (max-width: 991px){
#sp-header .logo img {
width: 95px;
margin-left: 45px;
margin-top:28px;
}
}

@media screen and (min-width: 992px){
#sp-header .logo img {
width: 180px;
margin-left: 20px;
margin-top:28px;
}
}

What do you use for media screens on mobile - laptop and computer

Hi,
Yes, you may use the above codes in your custom css.
And if you want the mobile sticky header to cover the logo in a good way then you may use the following code too:

.is-sticky #sp-header{height: 100px;}

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Best Regards