Logo is blury

For some reason the logo is blurry. The reason this is happening is because you have a height on it. We just need to remove the height and the blur will go away

@layer utilities {

@media (min-width: 80rem) {
.xl\:h-\[70px\] {
height: 70px;
}

You're right, it is a bit blurry in the desktop view.

Instead of just changing the height, I'd suggest using the same size, padding and margin as the mobile views use, then you eliminate the "bounce" when you squeeze the window from full width to mobile view.

All of the current width and height settings on the logo should be removed across mobile, tablet, and desktop. Those fixed dimensions are what’s causing the logo to become distorted.

Instead, set the logo width in the CSS to:

width: 100%;

This should allow the logo to scale properly across different screen sizes without distortion.

Kim suggestion: use the same sizing, padding, and margin approach that is currently being used for the mobile view.

One other thing to watch is the use of margins and padding inside flex layouts, especially on mobile. Too much spacing can cause alignment and sizing issues very quickly when flexbox is being used.

Kim:

You're right, it is a bit blurry in the desktop view.

Instead of just changing the height, I'd suggest using the same size, padding and margin as the mobile views use, then you eliminate the "bounce" when you squeeze the window from full width to mobile view.

To fix the logo without effecting website we just need to remove thisfrom the template layout.

This will also fix the logo and flickering issues

find this and remove

 flex shrink-0 items-center gap-3 sm:gap-4

find this and remove

h-[56px] w-auto sm:h-[64px] xl:h-[70px]

This will fix the mobile navigation

*** Find this ***

ml-auto flex items-center gap-2.5 xl:ml-0

replace with

mobile-header-actions ml-auto flex items-center gap-2.5 xl:ml-0

Than add this to to your css files

/* Mobile header controls - 400px and below */
@media (max-width: 430px) {
    .mobile-header-actions {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }
}

The image displays what is supposed to look like at max-width:430px; for all mobile devices

Question - what’s the logic of having the icons on either side?

I much prefer them all on the right.

Kim:

Question - what’s the logic of having the icons on either side?

I much prefer them all on the right.

No logic just figured since it was mobile lets use the full amount of space we have. More of a preference than anything.. You can remove this from the css i gave you and you will have your example

justify-content: space-between;

chadlly2003:

Kim:

Question - what’s the logic of having the icons on either side?

I much prefer them all on the right.

No logic just figured since it was mobile lets use the full amount of space we have. More of a preference than anything.. You can remove this from the css i gave you and you will have your example

justify-content: space-between;

Thanks for the help.