Skip to main content
pshashipreetham
18-Opal
pshashipreetham18-Opal
18-Opal
September 30, 2022
Solved

Media Query for Label and ValueDisplay widgets

  • September 30, 2022
  • 2 replies
  • 1683 views

Hello,

How to write Media query for label and ValueDisplay, making a responsive mashup, so based on the Screen Resolution, the font size of the Label and ValueDisplay should Increase and Decrease.

Can someone help me to write a Media Query?

Thanks,

Best answer by pshashipreetham

Hello,

So after going through some CSS Syntax, following CSS for Media Queries worked for me.

 

@media only screen and (max-height: 800px), screen and (max-width: 1550px)
{
 html{
 zoom: .1
 }
}

 

Thanks,

2 replies

S
suverma14-Alexandrite
14-Alexandrite
October 3, 2022

Hello @pshashipreetham You can use the similar example as in this article  to define your Media Query and change the Label and Value Display widget size as per different screen resolution.

 

If looking for a different approach, please let me know about it.

 

You can also refer to this training on PTC Development Portal for defining Media Queries.

pshashipreetham
18-Opal
pshashipreetham18-OpalAuthor
18-Opal
October 12, 2022

Hey @suverma ,

Can you please share a simple snippet for label font size using Media Query?

Thanks,

pshashipreetham
18-Opal
pshashipreetham18-OpalAuthorAnswer
18-Opal
November 8, 2022

Hello,

So after going through some CSS Syntax, following CSS for Media Queries worked for me.

 

@media only screen and (max-height: 800px), screen and (max-width: 1550px)
{
 html{
 zoom: .1
 }
}

 

Thanks,

Terms & ConditionsAccessibility statement