💁‍♂️ Add Info to Native User Menu with CSS

[Eric_Penn]

Having a user icon in the upper right corner of our apps looks very sleek. It would be great if we could add some additional info in the menu that flys out. Currently it only has ‘View Profile’ and ‘Sign Out’.

Would it be possible through CSS to add some dynamic text to the words ‘View Profile’? i.e. “$150.00 View Profile”

My use case is an account balance. It would be really helpful if we could display something dynamic in the native user menu.

[ThinhDinh]

@Eric_Penn

Would it be possible through CSS to add some dynamic text to the words ‘View Profile’? i.e. “$150.00 View Profile”

Dynamic might be out of reach with how CSS is structured on the new version. Sometimes I wish they can give us the option to point that to a user profiles column.

[Himaladin]

This is as far as it goes, Eric.

[Eric_Penn]

Nice! I’m impressed you got it that far!

What about a rich text component with the visibility ruled by the presence of the fly out menu? Almost like an extension of the current menu… is that what you did above but with basic text?

Do you mind sharing your beautiful code?

[Himaladin]

I haven’t found a way to position rich text within a menu or navigation. All components with dynamic data are currently limited to appearing in the screen. I will think about this further.

@Eric_Penn

is that what you did above but with basic text?

Any type of component with the class name showText.

If you also want to remove :hover for the following code, that’s fine:

#app-modal-root li:first-child:hover::before {
  content: "!";
  color: red;
  font-size: 1rem;
  font-weight: bold;
  margin-right: 5px;
  vertical-align: middle;
}

#root:has(#app-modal-root li:first-child:hover) #page-root .showText {
  display: block;
  position: sticky;
  top: 0;
}

.showText {
  display: none;
}

[Trustin]

I created a profile icon using rich text component.

Using html code to position it to the top right of the screen. Note that my app is mobile only.

<div style="cursor: pointer; position: absolute; top: -40px; right:10px;">
<img src="IMAGE" style="border: thick solid white;
width: 80px; height: 80px; border-radius: 50%;">
<div style="font-family: 'Inter', sans-serif; font-weight:700;
width:80px; margin-top:-5px; padding:5px; font-size: 15px; text-align: center; background: white; color: black; border-radius: 25px;">⭐RATINGS</div>
</div>

[Himaladin]

Yes, your approach is similar to the method I used in Notification Badge. However, what he want is within the fly-out menu.
So far, I am able to create a transparent fly-out, but I haven’t been able to place other components over/inside it yet.

[Himaladin]

@Eric_Penn,
I think the maximum result that can be achieved is by making the fly-out menu transparent.

The container class name is showText and the code in its Richtext component is:

<h6 style="position: relative; right: 0; text-align: right; margin: 0 15px;  margin-top: -12px; padding: 0px;color:white; font-weight:bold;">$150.00</h6>

Code in custom CSS:

/*Default hidden state*/
.showText {
  display: none;
}
/*Open menu state*/
#root:has(#app-modal-root li:first-child:hover) #page-root:not(:has(.mobile-layer)) .showText {
  display: block;
  position: sticky;
  top: 0px;
  height:0;
  z-index:9999;
}
/*Make the fly-out transparent*/
#root:has(#app-modal-root li:hover) #app-modal-root:not(:has(.mobile-layer)) > *{
position: relative;
background: rgb(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
}

[Himaladin]

The following code does not involve containers and special class names, because the class names are given directly in the richtext component HTML code.

Richtext component:

<h6 class="showText" style="right: 0; text-align: right; margin: 0 15px;  margin-top: -12px; padding: 0px;color:white; font-weight:bold;">$150.00</h6>

Code in custom CSS:

/*Default hidden state*/
.showText {
  display: none;
}
/*Open menu state*/
#root:has(#app-modal-root li:first-child:hover) #page-root:not(:has(.mobile-layer)) .showText {
  display: block;
  position: sticky;
  top:50px;
  height:0;
  z-index:9999;
}
/*Make the fly-out transparent*/
#root:has(#app-modal-root li:hover) #app-modal-root:not(:has(.mobile-layer)) > *{
position: relative;
background: rgb(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
}

[Eric_Penn]

@Himaladin,
A creative masterpiece!

Do you know why the code only works with ‘Preview custom CSS’ and does NOT work with ‘Use compiled CSS’? I only ask because when trying to apply it to an existing app using ‘Preview custom CSS’ breaks all of my existing work.

I’ve never really understood the difference between the two settings and always built CSS solutions under ‘Use compiled CSS’. Do you have anything to say about the two options?

Thank you so much for all of your effort!

[Himaladin]

“Use compiled CSS,” in my understanding, means you are using CSS compiled from Glide, not custom CSS. Therefore, it should be turned off. Meanwhile, “preview custom CSS” is only for previewing in the builder, and your custom CSS will still run in the app regardless of whether this switch is on or off.

[Eric_Penn]

Ok thanks. I’ve always used ‘Compiled CSS’ when working and now I wonder if that is a mistake.

Here is one example. I built a custom Intercom-like dashboard and it only works when compiled CSS is turned on.

And With Compiled CSS Turned Off

Below I’ve attached the CSS for this app. Maybe a quick surface scan and you could tell what I’ve been doing wrong. Ultimately I’d love to integrate your solution from this thread and moving forward use the best practices regarding CSS.

Summary of CSS

.background {
position:fixed;
margin-top:0;
background:#5498dc;
width:100%;
height:100%;
top:5.5em;
right:0;
z-index:-1;
}

.hover-markup,
.hover-buyin,
.hover-available {
    position: relative;
    display: inline-block;
}

.tooltiptext,
.tooltiptext2,
.tooltiptext3 {
    visibility: hidden;
    width: 300px;
    background-color: white;
    color: #4a4f40;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    position: absolute;
    bottom: 115%;
    left: 40%;
}

.hover-markup:hover .tooltiptext,
.hover-buyin:hover .tooltiptext,
.hover-available:hover .tooltiptext,
.hover-markup:hover .tooltiptext2,
.hover-buyin:hover .tooltiptext2,
.hover-available:hover .tooltiptext2,
.hover-markup:hover .tooltiptext3,
.hover-buyin:hover .tooltiptext3,
.hover-available:hover .tooltiptext3 {
    visibility: visible;
    opacity: 1;
}

@keyframes popIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.hover-markup:hover .tooltiptext,
.hover-buyin:hover .tooltiptext,
.hover-available:hover .tooltiptext,
.hover-markup:hover .tooltiptext2,
.hover-buyin:hover .tooltiptext2,
.hover-available:hover .tooltiptext2,
.hover-markup:hover .tooltiptext3,
.hover-buyin:hover .tooltiptext3,
.hover-available:hover .tooltiptext3 {
    animation: popIn 0.2s forwards;
}


.tooltiptext2 {

  z-index: 200;
  left: -50%;
}

.tooltiptext3 {

  z-index: 200;
  left: -250%;
}

.library-default ul {
    border-style: none;
}

.library-default li {
    border-width: 0px;
    font-weight: normal; 
}

.library-default li.selected {
    font-weight: 700; 
    border-bottom: 2px solid var(--gv-text-contextual-accent);
    color: var(--gv-text-contextual-accent);
}

.overlay {
  position: relative;
  top: 0px;
  z-index: 9999;
  margin-top: -45px;
}

@media (max-width: 900px) {
  .overlay {
margin-top: -92px;

  }
}

div[class*="container-padding-md"] {
  max-width: 92vw;
}

@media (max-width: 800px) {
  div[class*="container-padding-md"] {
    max-width: 100vw; 
  }
}

div[class*="single-column justify-center"],
div[class*="renderer___StyledDiv6"] {
  max-width: 92vw;
}

@media (max-width: 1000px) {
  div[class*="single-column justify-center"],
div[class*="renderer___StyledDiv6"] {
  max-width: 100vw;
  }
}

.clips {
  position: relative;
  top: 26px;
  z-index: 999;
  margin-top: 0px;
left: 220px;
}

@media (max-width: 500px) {
  .clips {
    left: 340px;
  }
}

.dashboard {

  z-index: 101;
}

.avatars {
  position: relative;
  top: 23px;
  left: -21px;
  z-index: 100;
margin-top: 0px;
}

@media (max-width: 1030px) {
  .avatars {
    top: -2px;
    left: 13px;
  }
}

.piece {
  top: 12px;
}

@media (max-width: 2500px) {
  .create {
    top: -14px;
  }
}

.custom-progress [class*="wire-page-progress___StyledDiv"] > p {
display: none;
}

.library-view ul {
border-style: none;
}

.library-view li {
border-width: 0px;
}

.library-view li.selected, .library-view:not(:has(.selected)) li:first-child {
font-weight: 700;
background: none;
border-radius: 0px;
border-bottom: 2px solid var(--gv-text-contextual-accent);
color: var(--gv-text-contextual-accent);
}

.tags {
  position: absolute;
  left: -9999px;
}

.imgcc section > div > div > div:has(button[aria-label="1"]) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 200 200' xml:space='preserve' height='200px' width='200px'><rect width='200' height='200' style='fill:%23731258;' /></svg>");
}

.full-container {
height: 100%;
}

.library-main div[class*="card-collection-card___StyledDiv6"]:has(button[aria-label="✅"]) {
  background: #731258;
}

.dashboard{
 z-index: 999;
}

.buy {
  position: relative;
  top: 26px;
 z-index: 100;
  margin-top: 0px;
}

.arrows {
  top: 47px;
  z-index: 999;
  margin-top: 0px;
  left: 6px;
  position: relative;
}

@media (max-width: 500px) {
  .arrows {
    top: 88px;
  
  }
}

.stickyfilters {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 9;
  margin-top: 0px;
}

@media (max-width: 1137px) {
  .stickyfilters {
    position: relative;
  }
}

.center-choice div {
  align-items: center;
}

.writer {
  display: inline-block;
  overflow: hidden;
  border-right: .07em solid black;
  white-space: nowrap;
  letter-spacing: .03em;
  line-height: 1.2;
  padding: 0.003em 0;
  width: auto;
  max-width: 0;
  animation:
    typing 2s steps(30, end) forwards,
    blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { max-width: 0; }
  to { max-width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: white; }
}

.grid .oneToOne {
  grid-template-columns: repeat(2, minmax(0px, 1fr));
}

.amount {
  position: relative;
  top: 23px;
  z-index: 100;
  margin-top: 0px;
left: 0px;
}

.key-input-market textarea[class*="wire-field"] {
-webkit-text-security: disc;
}

.key-input-market {
  position: relative;
  top: 23px;
  z-index: 100;
  margin-top: 0px;
left: 0px;
}

.regular-premium ul {
border-style: none;
}

.regular-premium li {
border-width: 0px;
}

.regular-premium li.selected, .library-view:not(:has(.selected)) li:first-child {
font-weight: 700;
background: none;
border-radius: 0px;
border-bottom: 2px solid var(--gv-text-contextual-accent);
color: var(--gv-text-contextual-accent);
}

@keyframes pulse {
  0% {
    border-color: #731258;
    transform: scale(1);
  }
  50% {
    border-color: #9b3f6c; /* A lighter shade for the pulsing effect */
    transform: scale(1.05);
  }
  100% {
    border-color: #731258;
    transform: scale(1);
  }
}

.tooltip-container {
  --background: #333333;
  --color: #e8e8e8;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  font-size: 14px;
  font-weight: 600;
  color: white;
  padding: 0.7em 1.8em;
  border-radius: 8px;
  text-transform: uppercase;
  height: 35px;
  width: 180px;
  display: grid;
  place-items: center;
  border: 2px solid #731258;
  animation: pulse 1.5s infinite;
}



.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-origin: -100%;
  transform: scale(1);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.tooltip-container span:last-child {
  position: absolute;
  top: 0%;
  left: 100%;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  opacity: 1;
  background-color: var(--background);
  z-index: -1;
  border: 2px solid var(--background);
  transform: scale(0);
  transform-origin: 0;
  transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
  display: grid;
  place-items: center;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.1em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--background);
  z-index: -1;
  border-radius: 8px;
  scale: 0;
  transform-origin: 0 0;
  text-transform: capitalize;
  font-weight: 400;
  font-size: 16px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
}

.tooltip::before {
  position: absolute;
  content: "";
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.3em solid var(--background);
}

.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  scale: 1;
  animation: shake .5s ease-in-out both;
}

.tooltip-container:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  color: white;
  border-color: transparent;
}

.tooltip-container:hover span:last-child {
  transform: scale(1);
  left: 0;
}

.tooltip-container:hover .text {
  opacity: 0;
  top: 0%;
  left: 100%;
  transform: scale(0);
}

@keyframes shake {
  0% {
    rotate: 0;
  }

  25% {
    rotate: 7deg;
  }

  50% {
    rotate: -7deg;
  }

  75% {
    rotate: 1deg;
  }

  100% {
    rotate: 0;
  }
}

.start-here {
  position: relative;
  top: 32px;
  z-index: 100;
margin-top: -32px;
}

.package {
  position: relative;
  top: 29px;
}

.hendonmob {
  position: relative;
  top: -47px;
 left: 100px;

}

.intercom .oneToOne {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
}

.send-message-text {
    font-size: 13px;
    font-weight: bold;
    transition: color 0.15s ease; /* Adjust the duration and easing as needed */
}

.send-message-text:hover {
    color: #51a4ef;
}

@keyframes openAnimation {
    0% {
        transform: scale(0.5) translate(0, 0);
        opacity: 0;
    }
    100% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
}

.animated-window {
    animation: openAnimation 0.25s ease-out;
    transform-origin: bottom right;
}

@keyframes closeAnimation {
    0% {
        transform: scale(0.5) translate(0, 0);
        opacity: 0;
    }
    100% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
}

.animated-close {
    animation: closeAnimation 0.1s ease-out;
    transform-origin: bottom right;
    animation-direction: reverse;
    animation-fill-mode: forwards;
}

.animated-close-hidden {
    display: none;
}

.marketplace {
    top: -230px;
    z-index: 100;
    margin-top: -30px;
}

.signup {
    top: -290px;
    z-index: 100;
    margin-top: -30px; 
}

.hover-button {
    position: absolute;
    top: 30px;
    right: -7px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}

.hover-button {
    display: inline-block;
    float: right;
    margin-right: 17px;
    background-color: transparent;
    padding: 5px 10px; 
    border-radius: 10px;
    font-family: Arial, sans-serif;
    color: black;
    cursor: pointer;
    text-align: left;
    padding-left: 10px; 
    font-size: 13px;
    width: 325px;
    transition: color 0.1s ease, background-color 0.1s ease;
    position: relative;
}

.hover-button:hover {
    color: #1E90FF;
    background-color: rgba(173, 216, 230, 0.3);
}

.hover-button::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 19px;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;  /* Adjusted size */
    height: 6px; /* Adjusted size */
    border-top: 1.5px solid #4285f4; /* Adjusted thickness */
    border-right: 1.5px solid #4285f4; /* Adjusted thickness */
}


.new-button {
    position: absolute;
    top: 467px;
    right: 15px; 
    text-align: right;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 9;
    white-space: nowrap; 
    overflow: hidden; 
}

.new-button-two {
    position: absolute;
    top: 489px;
    right: 15px; 
    text-align: right;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 9;
    white-space: nowrap; 
    overflow: hidden; 
}

.new-window {
    position: absolute;
    top: -105px;
    right: 17px; 
    text-align: right;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: -2;
    white-space: nowrap; 
    overflow: hidden; 
}


.message {
    position: absolute;
    top: 119px;
    right: 17px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}

.whatisstake {
    position: absolute;
    top: -101px;
    right: 21px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}

.howdoistake {
    position: absolute;
    top: -64px;
    right: 21px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}

.newplayerprofile {
    position: absolute;
    top: -27px;
    right: 21px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}
.newplayerpost {
    position: absolute;
    top: 10px;
    right: 21px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}

.whereseeresults {
    position: absolute;
    top: 47px;
    right: 21px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}


.whatifdontplay {
    position: absolute;
    top: 97px;
    right: 21px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}


.howdosell {
    position: absolute;
    top: 134px;
    right: 21px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}

.deposit {
    position: absolute;
    top: 171px;
    right: 21px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}

.refund {
    position: absolute;
    top: 216px;
    right: 21px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}
.winnings {
    position: absolute;
    top: 261px;
    right: 21px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}

.intercom {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0px;
  z-index: 1;
  margin-top: -625px;
}
.right-button {
    position: fixed;
    bottom: 128px;
    right: 12px;
    z-index: 9999;
    background-color: transparent;
    width: 119px;
    height: 85px;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Default styles for .help-icon and .help-text */
.right-button .help-icon {
    width: 24px;
    height: 24px;
    border: 1px solid #007bff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.right-button .help-text {
    font-size: 12px;
    margin-top: 5px;
}

/* Styles for the status-on class */
.right-button.status-on .help-icon,
.right-button.status-on .help-text {
    color: #007bff; /* Your blue color */
    border-color: #007bff;
}

/* Styles for the status-off class */
.right-button.status-off .help-icon,
.right-button.status-off .help-text {
    color: black;
    border-color: black;
}


.middle-button {
    position: fixed;
    bottom: 128px;
    right: 138px;
    z-index: 9999;
    background-color: transparent;
    width: 119px;
    height: 85px;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Default styles for .help-icon and .help-text */
.middle-button .message-icon {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.middle-button .message-text {
    font-size: 12px;
    margin-top: 5px;
}

/* Styles for the status-on class */
.middle-button.status-on .message-icon {
    border-left-color: #007bff; /* Your blue color */
}

.middle-button.status-on .message-text {
    color: #007bff; /* Your blue color */
}

/* Styles for the status-off class */
.middle-button.status-off .message-icon {
    border-left-color: black;
}

.middle-button.status-off .message-text {
    color: black;
}


.left-button {
    position: fixed;
    bottom: 128px;
    right: 258px;
    z-index: 9999;
    background-color: transparent;
    width: 119px;
    height: 85px;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Default styles for .home-icon and .home-text */
.left-button .home-icon {
    width: 24px;
    height: 24px;
    background-color: black;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-button .home-text {
    font-size: 12px;
    margin-top: 5px;
}

/* Styles for the status-on class */
.left-button.status-on .home-icon {
    background-color: #007bff; /* Your blue color */
}

.left-button.status-on .home-text {
    color: #007bff; /* Your blue color */
}

/* Styles for the status-off class */
.left-button.status-off .home-icon {
    background-color: black;
}

.left-button.status-off .home-text {
    color: black;
}

.homebackdrop {
    position: absolute;
    top: 198px;
    right: 17px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}

.welcomemessage {
    position: absolute;
    top: 39px;
    right: 17px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}

.header-home {
    position: absolute;
    top: -84px;
    right: 8px; 
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}

.help-header {
    position: absolute;
    top: -84px;
   right: 0px;
    text-align: left;
    font-size: 22px;
    font-family: poppins, serif;
    z-index: 2;
    white-space: nowrap; 
    overflow: hidden; 
}

.grid-three .threeColumns {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
}

[Himaladin]

A quick scan and my comments:

1. Your code lacks comments, making it difficult for me to understand the specific purpose behind its creation.
2. Your second image shows the CSS is working, but does it break your screen display? If so, it means there is code causing this issue.
3. You’ve written many @media queries, which I suspect might be contributing to the problem. These codes are unnecessary if you’re working in the Glide environment, which already has global media queries and special class names for various devices.

My suggestion, if you can’t find the source of the issue, is to clear all the code and copy the blocks one by one to ensure none of them are problematic. Of course, with the “use compiled CSS” switch turned off.

[ThinhDinh]

Tried this but unfortunately it doesn’t seem to show on my end. Is it just a rich text component and CSS code or do I have to do anything else? Thank you.

[Himaladin]

It looks like it’s because of the white text color added in the code. Here I set with dark theme.

[Himaladin]

I fixed the code for the fly-out because it was interfering with the dropdown fly-out:

/*Make the fly-out transparent*/
#root:has(#app-modal-root li) #app-modal-root:not(:has(.mobile-layer)):not(:has([data-testid="wc-item"])) > * {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

[Eric_Penn]

@Himaladin

Your second image shows the CSS is working,

All the positions I set on my rich text components are off.

@Himaladin

You’ve written many @media queries, which I suspect might be contributing to the problem. These codes are unnecessary if you’re working in the Glide environment,

The reason for the media queries is because there is a focus on front end user experience when adjusting screen sizes. Glide can handle some of the changes yes but when you start adding a lot of html in rich text components you need a little bit more. Natively we could use Device Info → Window Width but that doesn’t update on the fly.

Why do we have a ‘Use compiled CSS’ switch if the recommendation is to always leave it OFF? Is there an example of when to turn it ON?

It’s a very large task to go through this entire app and redo it with Use Compiled CSS turned off. In the future I will stay away from this button!

[Himaladin]

The HTML you wrote in the rich text component with inline CSS is not considered custom CSS; however, pseudo-elements, animations, and media queries do not work here. I also had code that I transferred from my classic app, which used all of these elements, and eventually, I had to adjust them one by one because they didn’t work.

Glide applies 3 types of media queries to handle 3 devices: mobile (if I’m not mistaken: max-width: 768px), tablet, and desktop. These are already defined at a higher level, so what you are doing is unnecessary. And I see that you’re applying various max-width sizes. How many types of devices are you covering?

@Eric_Penn

Why do we have a ‘Use compiled CSS’ switch if the recommendation is to always leave it OFF?

If you’re asking why, then I cannot explain it definitively. Do you still see the message “Your published app will have your custom CSS enabled by default” when the switch is turned on? What I can speak to is the factual side. Just try clearing all your custom code and add only one piece of code to test it, and see where your custom CSS works. Check it in your app as well.

@Eric_Penn

Is there an example of when to turn it ON?

If I don’t want to use or wish to cancel the use of custom CSS. Or if I accidentally wrote code that breaks the entire app, and I haven’t yet found the source of the problem.

Sorry if any of my explanations are incorrect. I also have limited understanding of the overall structure and concepts in Glide.

[Eric_Penn]

@Himaladin

These are already defined at a higher level, so what you are doing is unnecessary.

Let me explain further. In the example above the arrows on the left hand side move down the screen as I make the screen smaller. The reason the arrows move down the screen is because of the following code

.arrows {
  top: 47px;
  z-index: 999;
  margin-top: 0px;
  left: 6px;
  position: relative;
}

@media (max-width: 500px) {
  .arrows {
    top: 88px;
  
  }
}

So if the screen size is greater than 500px then the arrows have top: 47px else the arrows have top: 88px

Maybe there’s a better way but the media query helps me reposition the arrows in real time. All of the media queries I wrote serve the same purpose… to reposition a custom component where Glide otherwise would have no influence over it’s position.

@Himaladin

Do you still see the message “Your published app will have your custom CSS enabled by default” when the switch is turned on?

No sir, only when turned off.

@Himaladin

If I don’t want to use or wish to cancel the use of custom CSS. Or if I accidentally wrote code that breaks the entire app, and I haven’t yet found the source of the problem.

Ok thanks so much for the clarity.

[Himaladin]

Is your main issue with the “use compiled CSS” switch or with the media query? I think we should resolve this first before discussing the query. If the media queries you’re using don’t produce the desired results, make sure to check if the queries are relevant to your target devices.

It seems like you enjoy dragging to resize the width. Feel free to do so as long as it works after the switch is turned off.
Your query will only apply when users have a width smaller than 500px (small devices). If I were following Glide, I could write .mobile-layer .arrow.