Resize title based on device

Wappler General How To
#1

Been a while since I used Wappler and now back working on my site.
I am probably overlooking something.
Basically have a background image with text, all fine.
How do I resize the title based on the device, as the text doesn’t seem responsive?
Ideally, I want text with different absolute positions and sizes based on xs, large etc.
Apologies if I have missed something silly here, just cant seem to get it working.

#2

There are a number of ways to do this.

Bootstrap itself has some classes that offer responsiveness.
The design view works that if you are viewing in mobile portrait and make visual adjustments to amount of cols, or col offsets then switch views to mobile landscape or any others and adjust those properties it will only affect that breakpoint.
This generally does not work with text size, but good for positioning.

The most common solution is media queries in a css file
Sample HTML code

<p class="pauls_size_changing_text">Test text</p>

Sample CSS file

@media (min-width: 0) {
  .pauls_size_changing_text {font-size:0.1rem;}
}
@media (min-width: 576px) {
  .pauls_size_changing_text {font-size:0.3rem;}
}
@media (min-width: 768px) {
  .pauls_size_changing_text {font-size:0.6rem;}
}
@media (min-width: 992px) {
  .pauls_size_changing_text {font-size:0.9rem;}
}
@media (min-width: 1200px) {
  .pauls_size_changing_text {font-size:1.2rem;}
}

You could use show/hide and browser component in Wappler or better use browser component to retrieve viewport width and make it alter font-size percentage as a calculation based on the reported width.

#3

Thanks,
All sorted, completely forgot about @media, now working.

#4

This works well also and scales gradually rather than in jumps as it hits the thresholds

1 Like
#5

Responsive Font Sizes in the Theme Mnager is supposed to do that automatically for Bootstrap. Even adjusting the Sass source files, I have not been able to make it work. Therefore I always include the following CSS in my projects

@media (max-width:1200px) {

legend {

font-size: calc(1.275rem + 0.3vw) ;

}

h1, .h1 {

font-size: calc(1.375rem + 1.5vw) ;

}

h2, .h2 {

font-size: calc(1.325rem + 0.9vw) ;

}

h3, .h3 {

font-size: calc(1.3rem + 0.6vw) ;

}

h4, .h4 {

font-size: calc(1.275rem + 0.3vw) ;

}

.display-1 {

font-size: calc(1.725rem + 5.7vw) ;

}

.display-2 {

font-size: calc(1.675rem + 5.1vw) ;

}

.display-3 {

font-size: calc(1.575rem + 3.9vw) ;

}

.display-4 {

font-size: calc(1.475rem + 2.7vw) ;

}

.close {

font-size: calc(1.275rem + 0.3vw) ;

}

.lead {

font-size: calc(1rem + 0.3vw) ;

}

}

1 Like
#6

There was a big in the theme manager abou this. Will be fixed in the next update