0

EDIT: THINK I GOT IT WITH THE USE OF iFRAME: https://plnkr.co/edit/X2FQGzxjeDFiYHXlQFFg

iFRAME IS ITS OWN VIEW PORT

I am trying to resize font-size inside an em depending on the size of its parent li. When I try vw is changes based on the size of the browser window instead of contingent upon the size of the parent li. The parent li is position relative and the child em is position absolute. I'm very grateful for help you could share.

<li style="width: 14.28%;
           padding: 7.18% 0;
           border: 1px solid #000;
           box-sizing: border-box;
           background-color: #fff;
           float: left;
           list-style: none;
           position: relative;
           display:block;">

    <em style="position: absolute;
               font-size: 2vw;
               font-weight: 700;
               text-align: center;
               width: 100%;
               line-height: 0%;">12</em>

</li>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Benjamin McFerren
  • 822
  • 5
  • 21
  • 36
  • 2
    Basically you can't with CSS. Font-size is not relatable to width or height of a parent element (other than the body). – Paulie_D Sep 12 '16 at 15:52
  • Check out [this answer](http://stackoverflow.com/a/19818026/1028949) on another SO question that might provide some guidance on how it *could* be done via CSS alone, assuming you can figure out how to translate the `14.28%` width into `vw` units. @Paulie_D might want check it out too. – jeffjenx Sep 12 '16 at 15:57
  • This is what media queries are for. You probably have an idea of what the parent's width is at certain breakpoints, so use media queries and breakpoints to specify the child's font-size, not it's parent's size. – Robert Wade Sep 12 '16 at 15:58
  • @Paulie_D in the post you marked as duplicate, it mentions a possible solution using the css calc( ... ) but the example at the bottom of that post, does not appear to be a correct solution. Could you please share how this may be accomplished with font-size: calc( ... ) ? Thank you greatly for your help – Benjamin McFerren Sep 12 '16 at 16:04
  • There is no CSS solution to this.. – Paulie_D Sep 12 '16 at 16:08
  • @Paulie_D is an iframe considered a viewport? – Benjamin McFerren Sep 12 '16 at 17:26
  • @Paulie_D think I got it with iframe: https://plnkr.co/edit/X2FQGzxjeDFiYHXlQFFg – Benjamin McFerren Sep 12 '16 at 17:46
  • @Paulie_D can you please remove the duplicate question tag since the answer here is different and only uses html & css ? – Benjamin McFerren Sep 12 '16 at 19:50

0 Answers0