CSS for Responsive Header

Ask for Help
61

Try to switch to maximum view and ā€¦

Screenshot 2024-05-14 at 13.02.32

62

image
image1914Ɨ860 85.2 KB

Do you think my screen might be an unusual length?

63

Glide used to be able to go full screen within my window but itā€™s not doing it at the moment.

64

Maybe you are using too much memory. Try closing it and opening it again.

65

Itā€™s opening to the full width after restarting the computer

image
image1919Ɨ830 91.3 KB

66

Where is your logo? Did you change the settings?

67

I deleted it to see if anything would change.

Now I see this message:
image

This was the only code I had in there:

/*Container padding*/
#page-root:has(.slide-Show) .slide-Show > div > div > div > div {
padding:0 !important;
width: 100%;
margin-top:-20px;
}
/*Can delete*/
#page-root:has(.slide-Show) .slide-Show {
background: color !important;
padding:0;
}
#page-root:has(.slide-Show) [data-testid="card-image"]{
height:300px;
}
#page-root:has(.slide-Show) [data-testid="card-image"] img{
border-radius:0;



#main-root:has(.slide-Show) [data-testid="cc-card"] > div > div:last-child {
    position: absolute;
    width: calc(100% - 4px);
    height:100%;    
    flex-direction: row;
}

#main-root:has(.slide-Show) .image-style-rectilinear.grid > p:nth-child(1) {
padding: 4px 8px;
text-transform: capitalize;
font-size: var(--text-size-base,1rem);
color: var(--gv-text-contextual-pale);
}

#main-root:has(.slide-Show) .image-style-rectilinear.grid > h3 {
    position: absolute;
    display: flex;
    padding: 6px;
    right:0;
    top: 0;
    font-size: var(--text-size-base,1rem);
}

#main-root:has(.slide-Show)  .image-style-rectilinear.grid > p:nth-child(3) {
    position: absolute;
    width: 100%; 
    display: flex;
    justify-content: center;
    bottom: 0;
    padding: 4px 8px;
    text-align: center;
    font-size: var(--text-size-base,1rem);
}
68

Turn it off

69

ok but should I try to validate the CSS?

70

No, itā€™s because it contains :has, a pseudo code that is still in staging.

This is not the last one I provided. The last one, I have already given above (contain /*Hide Navbar*/)

71

sorry, I already tried to validate it. It says using root is unstable

72

Iā€™ll delete the codes and leave the page for 5 minutes to update. Then Iā€™ll test it with the codes without ā€œrootā€, just in case thatā€™s the reason why everything got buggy.

73

remember I said I donā€™t want to hide the nav bar. I doesnā€™t look good without the bar.

74

from back here.

Do you think this is the source of the problem?

75

Just remove this part:

/*Hide Navbar*/
#page-root:has(.slide-Show):has([class*="mobile-nav-bar"]) [data-testid="wire-container"] {
background-color: transparent !important;
padding-top: 0;
}
76

yes, thatā€™s what I did :slight_smile:

77

Ok. So after deleting the codes and waiting a whileā€¦ during which time I also cleared cached, temporary files and cookies from my pc, and upped the monitor zoom by 10%ā€¦

I opened the app and now it looks like this:

image
image1901Ɨ811 67 KB

I really think it could be a bug in the system. So maybe I should delete this app and use another on to test the layouts. What do you think?

Look at this @Himaladin @NoCodeAndy

Isnā€™t that weird?

78

What is the problem? I donā€™t see the oddity? You can replace it with a new container to test it.

79

I thought it was weird that the image flashed big every time I changed back to the layout viewā€¦ Guess Iā€™m just panicking now, lol.

80

Now, NoCodeAndy is freaking out. :sweat_smile: