0

I've got a very basic css question, but I'm not front-end so please forgive me...

I'm using vuetify, and v-flex to manage grid points. on medium size screens and above my card is taking 6 grids, on small size (means <960px) it's 12 grids. 

<v-container>
<v-layout justify-center>
<v-flex sm12 md6>
    <v-container>
        <v-card hover class="mb-3">
        <v-card-text>
            <div class="viewport">
                <div>
                    <p><b>We offer sth in this title:</b></p>
                </div>
                <div>
                    <ul>
                    <li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,</li>
                    <li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,</li>
                    <li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,</li>
                    <li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,</li>
                    </ul>
                </div>
            </div>
        </v-card-text>
        </v-card>
    </v-container>
</v-flex>
</v-layout>
</v-container>

I'm adding basic css class to manage viewport of the div inside v-card

  .viewport {
    font-size: 1.5vw!important;
  }

and it's seems working until I'm not resizing screen <960 px. Them viewport seems to base on screen width, not the div width.

Can anyone tell me what I'm doing wrong. It seemed to be easy to set up...

example in codepen: https://codepen.io/anon/pen/oEOqLb

gileneusz
  • 1,435
  • 8
  • 30
  • 51
  • I don't know if I'm understanding the question. For me the font-size is changing for every width i'm resizing to, and you don't want that? – jerrylow Mar 03 '18 at 17:10
  • @jerrylow I want to resize it according to card size, When I reach flex point <960px window size it's not resizing correctly – gileneusz Mar 03 '18 at 17:12
  • I think this is what you're looking for https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container – jerrylow Mar 03 '18 at 17:18
  • @jerrylow I saw this question and tried to implement it to just basic div, but with no luck – gileneusz Mar 03 '18 at 17:19
  • 1
    Maybe I'm not understanding the want. What I'm seeing is behaving exactly as I think you want. The 1.5vw is based on the viewport width and that alone, but since your div does resize in width to your viewport and the font is resizing to the viewport width I see this as correct. If you think the font size <960px is too small then you can add a media query to up the font-size to 2.5vw < 960px. – jerrylow Mar 03 '18 at 17:23
  • @jerrylow ? imagine the real card, just like paper card - and if you are making card smaller - you expect the text to be smaller too. So If card is going to 100% size of the screen at 960px - so you expect to text inside the card will be bigger accordigly... – gileneusz Mar 03 '18 at 17:26
  • 1
    Ok, so my previous comment was the correct one. Again, the vw metric is based on viewport width and that alone. The div changing width doesn't actually affect it, just in illusion because its size and the viewport is changing at the same time. A media query to up the font size when the div goes full width is your best option. – jerrylow Mar 03 '18 at 17:31
  • @jerrylow oh I see... I don't even know what media query is :) – gileneusz Mar 03 '18 at 17:33

0 Answers0