feva•4w ago

can't make mobile styles work

https://app.windmill.dev/public/thrive-health-holdings/b88e89a044f118ea68466287cc973a09 how can I make it work on mobile? this is the global CSS I've used so far:

#app-content {
  min-width: unset !important;
}

.wm-app-grid, .svlt-grid-item {
  width: 100% !important;
}

.wm-app-grid, .wm-schema-form {
  padding: 0 !important;
}

.svlt-grid-item {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  height: auto !important;
}

.svlt-grid-container {
  height: auto !important;
}

body > div:nth-child(1) > div.z-50.text-2xs.text-tertiary.absolute.top-3.left-2 {
  display: none !important;
}

body > div:nth-child(1) > div.z-50.text-xs.fixed.bottom-1.right-2 {
  display: none !important;
}

#app-content {
  min-width: unset !important;
}

.wm-app-grid, .svlt-grid-item {
  width: 100% !important;
}

.wm-app-grid, .wm-schema-form {
  padding: 0 !important;
}

.svlt-grid-item {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  height: auto !important;
}

.svlt-grid-container {
  height: auto !important;
}

body > div:nth-child(1) > div.z-50.text-2xs.text-tertiary.absolute.top-3.left-2 {
  display: none !important;
}

body > div:nth-child(1) > div.z-50.text-xs.fixed.bottom-1.right-2 {
  display: none !important;
}

5 Replies

fevaOP•4w ago

totally lost as to what to change, I've already overwritten all the min-width styles

rubenf•4w ago

What are you trying to do? But yeah I think the min- width could be improved globally

fevaOP•4w ago

@rubenf I'm trying to embed it as an iframe in a web builder but somehow the min-width is messing with me just trying to work on devices between 320 and 420 pixels

rubenf•4w ago

I think it's hard coded at the page level

fevaOP•4w ago

ouch, then ... the global css can't make it work thanks for checking though had to do the most ugly thing for now, asked Claude to create a bunch of media queries in increments of 5px

@media (max-width: 345px)  {
  #app-content {
    width: 340px !important;
  }
}
@media (max-width: 340px)  {
  #app-content {
    width: 335px !important;
  }
}

@media (max-width: 345px)  {
  #app-content {
    width: 340px !important;
  }
}
@media (max-width: 340px)  {
  #app-content {
    width: 335px !important;
  }
}

that solves it for now

can't make mobile styles work

Did you find this page helpful?