0

I am using gridstack.js in one of my projects and there are 3 resizable and draggable divs on the grid.
I would like to resize text in p and h3 tags in these divs and save fontsize values when I resize parent div. I can do this like this: Can text be resizable using jquery-ui?

But what should I do when the screen changes? For example, I am using small screen and after I resize one of the divs, p fontsize may be 12px. When I use large screen what should be fontsize of p tag? How can I adjust this?

Thanks

Community
  • 1
  • 1
baris usanmaz
  • 839
  • 1
  • 13
  • 31

1 Answers1

0

You could just use a @media rule to run each rule depending on the screen width. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Gavin Thomas
  • 1,196
  • 6
  • 10
  • Hi, you know divs are resizable in gridstack and also texts resize when divs resize. For example, I can set font-size:12px for '@media' max-width:480px and font-size:16px for '@media' max-width:960px . But when I have a 6-block width div(in gridstack), text in this should be seen different in 480px and 960px screens. And these font-size values should not be static because I am also resizing divs and font-size changes.I do not know the fontsize value when screen swaps. Thanks – baris usanmaz Mar 24 '16 at 09:56
  • You could change it to a % based Font Size depending on a parent element? E.g. 80% of `p.parent` – Gavin Thomas Mar 24 '16 at 09:59