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
3 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