responsiveness

0
hi team , i want that on mobile screen or tablet screen the topbar font size get decreased and word should not break  and i wan to hide the image on screen size less then 360px . how i can write media queries for this ?
asked
4 answers
0

ChatGPT suggests this: 

/* For screens smaller than or equal to 768px (tablets and below) */
@media only screen and (max-width: 768px) {
  .topbar {
    font-size: calc(1.5vw + 10px); /* Gradual font size change based on viewport width */
  }
}

/* For screens smaller than or equal to 360px (mobile screens) */
@media only screen and (max-width: 360px) {
  .topbar {
    font-size: calc(1.2vw + 8px); /* Gradual font size change based on viewport width */
  }
  .topbar img {
    display: none; /* Hide the image */
  }
}

 

answered
0

hi johan ,

 thanks for your response . Can you plz tell me this is the correct way to use media query in mendix ? and i import this in main.scss also .

image.png

 

and i have add the class on this layout . but nothing change on UI 

image.png

answered
0

First of all, I would recommend to change the file type from mediaQuery.css to mediaQuery.scss.

Secondly, did you add an import in main.scss for the mediaQuery.scss?

 

If not, add the following in main.scss:

@import "mediaQuery.scss";

 

answered
0

Just came across this post and would like to point out one more thing. 

 

Try to prevent using camelCasing inside naming for your .scss sheets, this may cause errors when trying to deploy (Mendix auto lowercases certain names when creating a package for deployment). Try sticking to BEM standards as much as possible, i.e.: 'media-queries.scss'

 

Hope it helps! We had a lot of mysterious deploy errors in Mendix 10 when using the camelCasing naming convention. Took us a while before we figure it out :)

answered