CSS for Responsive Header

[Sekayi_Liburd]

so strange. Mine is small no matter what I do… Only in the custom collection it gets bigger.

[Himaladin]

What components and configurations are you using?

[Sekayi_Liburd]

I think I lost some of the code. Can you send it again?

[Himaladin]

This is not a matter of code, but rather the components being used.

[Sekayi_Liburd]

ok but I deleted all of the code and nothing appeared to change

These are my components. They are at the top.

[Himaladin]

3 kolom? The code above should work. What seems to be the problem on your end?

@Himaladin

/*Hide Navbar*/
#page-root:has(.slide-Show):has([class*="mobile-nav-bar"]) [data-testid="wire-container"] {
background-color: transparent !important;
padding-top: 0;
}
/*Container padding*/
#page-root:has(.slide-Show):has([class*="mobile-nav-bar"]) .slide-Show > div > div > div > div {
padding:0 !important;
width: 100%;
//margin-top: calc(30px - var(--safe-area-inset-top));
}
/*Hide Container background*/
.mobile-layer #main-root:has(.slide-Show) .slide-Show {
background: transparent !important;
}
.mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"]{
height:300px;
}
.mobile-layer #main-root:has(.slide-Show) [data-testid="wire-component-stack-slide-Show"] > div > div > div, .mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"] > div, .mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"] img, #page-root:has(.slide-Show) [data-testid="cc-card"]{
border-radius:0;
padding:0px;
}

[Sekayi_Liburd]

I’m not sure what the problem is. I’m searching for it.

[Himaladin]

@Himaladin

but if there’s too much of her, she can make you dizzy.

[Sekayi_Liburd]

Ok. I think there’s a bug. Before I copied your code, I went over to another app and then returned to see it like this:

It wouldn’t align like that before.

It’s still small though… then I replaced my code with yours and it’s still small.

Full screen looks like this:

[Himaladin]

If you use a component for the logo, then the limit you can achieve is this. However, if you use an container’s image as a background, you can exceed it, but it won’t appear on mobile.

[Sekayi_Liburd]

Ok. I’ll try it

[Sekayi_Liburd]

I closed the page and opened it again and it’s back to this:

And I didn’t change anything yet.

I probably played around too much and broke the system

[Himaladin]

@Sekayi_Liburd

These are my components. They are at the top.

Are you sure?

@Sekayi_Liburd

image330×512 13.6 KB

[Sekayi_Liburd]

when I reopened the page, the components moved … I didn’t move them.

@NoCodeAndy Has this happened before?

[Himaladin]

This happens when you’re trying to do a layout. This is normal.

[Sekayi_Liburd]

why does it happen?

or I should ask… Is it supposed to happen?

[Himaladin]

The system cannot redistribute your component back to another column, except undo.

[Sekayi_Liburd]

Since I had closed the page, undo doesn’t get me very far:

[Himaladin]

Is your screen wide enough? Do a crosscheck in CSS as well.

[Sekayi_Liburd]

my screen is 1920 (according to Glide device info). I deleted all the css and just copied the last one you gave me.

I’'ll try reverting to my original css from earlier today.