Responsiveness Css

Asked

Viewed 66 times

0

inserir a descrição da imagem aqui 

@media screen and (max-width: 1100px) and (min-width: 600px) {
    html {
        width: 100%;
        height: 200%;
    }


    body {
        background: #f8f8f8;
        font-family: "Verdana", Times, serif;
        font-size: 18px;
        margin: 10px;
        height: 100%;

    }


    #usuario {
        font-size: 11px;

    }

    .menu ul {
        margin-left: 1%;
        margin-top: -10px;
    }


    .footer {
        height: 10%;
        text-align: left;
        margin-bottom: 10px;
    }

    .webGrid {
        margin: 11px;
        margin-left: 25px;
        border-collapse: collapse;
        width: 40%;
        background-color: #ffffff;
        text-align: justify;
        font-size: 10.1px;
        float: left;
    }

    .webGrid2 {
        margin: 10px;
        margin-left: 400px;
        border-collapse: collapse;
        width: 35%;
        background-color: #ffffff;
        text-align: left;
        font-size: 10px;
        margin-top: 900px;
    }

    .headerGrid a {
        color: rgb(00, 87, 147);
        text-decoration: none;


    }

    .comentario {
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;


    }

    .grafico {
        float: left;

    }



    #chartContainer, #chartContainer2 {
        zoom: 52%;
        display: inline-flex;
        margin-top: 400px;
        float: left;
        margin-left: 1%;

    }

    #chartContainer3, #chartContainer4 {
        zoom: 52%;
        display: inline-flex;
        margin-top: 200px;
        float: left;
        margin-left: 1%;
        margin-top: 10.5%

    }

    #chartContainer5 {
        zoom: 50%;
        display: inline-flex;
        margin-top: 416px;
        float: left;
        margin-left: 1%;

    }


}

when resizing the screen all content is resized, in the graphics I zoomed in, so that the graphic is with a size in evidence at the request of the user, the problem is that the names and that are on top of the graphics do not increase as the zoom I put, how can I set it to be proportional?

css css3 responsive

  • But if you want to increase, why did you put Zoom at 50%? You should put it at 150%

  • @hugocsl 50% meets what was requested by them,before I had placed 150%

  • These graphics are being made via plugin? as they are being built?

1 answer

0


You have to declare the font-size in each @media-screen to get really how you want it. Take a read here, this will also help.

  • I did that and even though what is written on top of the chart did not match ,the font still the same size, I put a print to try to make it clearer.

  • tries to put '!Important' in font-size'

  • and clears the browser cache

Browser other questions tagged css css3 responsive

You are not signed in. Login or sign up in order to post.