Change color and text size in Responsive sides when size change

Wappler General Need Help
1

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

2

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

3

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.

4

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
5

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

6

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

2 Likes
7

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
8

Need to upgrade @ben

download_big_ipad
download_big_ipad.jpeg494×659 245 KB

5 Likes
9

Stop it Paul, you’re making me jealous.

2 Likes