Change color and text size in Responsive sides when size change

How can I change the styles or design in a responsive design when the media (laptop /mobile ) is changed

Could you please explain a little more detailed what you need to achieve?

I want to change the size of the text and the buttons in the cards in a smaller ones when the side is shown in a mobile.

You can do that using simple css media queries:

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) {
    .btn {
         font-size: 0.75em; // or any pixel value
     }
}

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { 
    .btn {
         font-size: 0.9em; // or any pixel value
     }
 }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { 
    .btn {
         font-size: 1em; // or any pixel value
     }
 }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199) { 
    .btn {
         font-size: 1.25em; // or any pixel value
     }
}

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Perfect.
I thought Wappler did that when I selected the Icon of the media on the top.
obviously it didn’t that why everything went wrong

That’s not yet in the UI as it is a work in progress, but it will be integrated really soon.

2 Likes

This is a remark that need not be taken seriously. As an aged person I already have three sets of spectacles, namely

  1. general use
  2. reading
  3. IT

I’d hate to have to add a fourth pair for tiny font sizes on my mobile.

4 Likes

Need to upgrade @ben

5 Likes

Stop it Paul, you’re making me jealous.

2 Likes