Responsiveness using Media Query

William Published at Dev

William

@media all and (max-width: 800px) {
    /*Charts*/
    .chart-1 {
        width: 100%;
        margin-bottom: 20px;
        margin-left: 5%;
        box-shadow: -1px 3px 3px 3px rgb(167,167,167);
        float: left;
    }

    .chart-2 {
        width: 100%;
        margin-bottom: 20px;
        margin-left: 5%;
        box-shadow: -1px 3px 3px 3px rgb(167,167,167);
        float: left;
    }

    .chart-3 {
        width: 100%;
        margin-bottom: 20px;
        margin-left: 5%;
        box-shadow: -1px 3px 3px 3px rgb(167,167,167);
        float: left;
    }

    .chart-4 {
        width: 100%;
        margin-bottom: 20px;
        margin-left: 5%;
        box-shadow: -1px 3px 3px 3px rgb(167,167,167);
        float: left;
    }

    .cg-chart-1 {
        width: 90%;
        height: 90%;
    }

    .cg-chart-2 {
        width: 90%;
        height: 90%;
    }

    .cg-chart-3 {
        width: 90%;
        height: 90%;
    }

    .cg-chart-4 {
        width: 90%;
        height: 90%;
    }
}

.chart-1 {
    width: 620px;
    height: 400px;
    margin: 0 auto;
    margin-left: 5%;
    box-shadow: -1px 3px 3px 3px rgb(167,167,167);
    float: left;
}

.chart-2 {
    width: 420px;
    height: 400px;
    margin: 0 auto;
    margin-left: 2%;
    box-shadow: -1px 3px 3px 3px rgb(167,167,167);
    float: left;
}

.chart-3 {
    width: 600px;
    height: 400px;
    margin: 0 auto;
    margin-left: 2%;
    box-shadow: -1px 3px 3px 3px rgb(167,167,167);
    float: left;
}

.chart-4 {
    width: 1717px;
    height: 400px;
    margin: 0 auto;
    margin-left: 5%;
    box-shadow: -1px 3px 3px 3px rgb(167,167,167);
    float: left;
    margin-top: 50px;
}

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>   

<body class="body">

   
        <div class="cg-chart-1"><div id="container-chart-1" class="chart-1"></div></div>

        <!--Container do Gráfico 2-->
        <div class="cg-chart-2"><div id="container-chart-2" class="chart-2"></div></div>

        <!--Container do Gráfico 3-->
        <div class="cg-chart-3"><div id="container-chart-3" class="chart-3"></div></div>

        <!--Container do Gráfico 4-->
        <div class="cg-chart-4"><div id="container-chart-4" class="chart-4"></div></div>

        <!--Gráfico 1-->
        <script>
            Highcharts.chart('container-chart-1', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'RANKING VENDEDORES'
                },
                subtitle: {
                    text: 'Receita'
                },
                xAxis: {
                    categories: ['Maria', 'José', 'Rogério', 'Ricardo', 'Michelle'],
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'R$',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                },
                tooltip: {
                    valueSuffix: ' millions'
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 80,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                    shadow: true
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: 'Junho 2017',
                    data: [107, 31, 635, 203, 2]
                }, {
                    name: 'Julho 2017',
                    data: [133, 156, 947, 408, 6]
                }, {
                    name: 'Agosto 2017',
                    data: [1052, 954, 4250, 740, 38]
                }]
            });
        </script>

        <!--Gráfico 2-->
        <script>

            var gaugeOptions = {

                chart: {
                    type: 'solidgauge'
                },

                title: null,

                pane: {
                    center: ['50%', '50%'],
                    size: '80%',
                    startAngle: -90,
                    endAngle: 90,
                    background: {
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                        innerRadius: '60%',
                        outerRadius: '100%',
                        shape: 'circle'
                    }
                },

                tooltip: {
                    enabled: false
                },

                yAxis: {
                    stops: [
                        [0.1, '#7CB5EC']
                    ],
                    lineWidth: 0,
                    minorTickInterval: null,
                    tickAmount: 2,
                    title: {
                        y: -70
                    },
                    labels: {
                        y: 16
                    }
                },

                plotOptions: {
                    solidgauge: {
                        dataLabels: {
                            y: 5,
                            borderWidth: 0,
                            useHTML: true
                        }
                    }
                }
            };

            var chartSpeed = Highcharts.chart('container-chart-2', Highcharts.merge(gaugeOptions, {
                yAxis: {
                    min: 0,
                    max: 200,
                    title: {
                        text: ''
                    }
                },

                credits: {
                    enabled: false
                },

                series: [{
                    name: '',
                    data: [80],
                    dataLabels: {
                        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                        '<span style="font-size:12px;color:silver"></span></div>'
                    }
                }]

            }));
        </script>

        <!--Gráfico 3-->
        <script>
            Highcharts.chart('container-chart-3', {
                chart: {
                    type: 'pie'
                },
                title: {
                    text: 'SITUAÇÃO CLIENTES'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}: {point.y:.1f}%'
                        }
                    }
                },

                series: [{
                    name: 'Clientes',
                    colorByPoint: true,
                    data: [{
                        name: 'INATIVOS',
                        y: 45
                    }, {
                        name: 'POSITIVADOS',
                        y: 23
                    }, {
                        name: 'ATIVOS',
                        y: 32
                    }]
                }]
            });
        </script>

        <!--Gráfico 4-->
        <script>
            Highcharts.chart('container-chart-4', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Resultado Diário'
                },
                subtitle: {
                    text: 'Mês Atual'
                },
                xAxis: {
                    categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']
                },
                yAxis: {
                    title: {
                        text: 'Percentual Atingido'
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: false
                    }
                },
                series: [{
                    name: 'RECEITA',
                    data: [79.02, 122.81, 119.52, 32.77, 121.14, 128.59, 153.65, 110.51, 143.37, 109.86, 8.86, 120.25, 136.49, 163.17, 90.46]
                }, {
                    name: 'VOLUME',
                    data: [68.79, 106.65, 98.35, 28.62, 101.19, 102.13, 121.39, 85.31, 111.32, 84.88, 20.44, 88.41, 105.23, 131.66, 71.81]
                }, {
                    name: 'POSITIVAÇÃO',
                    data: [27.60, 38.10, 68.70, 15.60, 45.60, 72.30, 71.40, 75.30, 59.40, 61.20, 3, 51.60, 73.50, 61.80, 46.50]
                }]
            });
        </script>
</body>

I have a screen with 4 charts. The 3 first ones are suposed to be side by side as long as the screen can show them like that. Otherwise, them all are shown under each other with a 100% width.

This is my HTML for the charts:

 <!--Container do Gráfico 1-->
    <div class="cg-chart-1"><div id="container-chart-1" class="chart-1"></div></div>

    <!--Container do Gráfico 2-->
    <div class="cg-chart-2"><div id="container-chart-2" class="chart-2"></div></div>

    <!--Container do Gráfico 3-->
    <div class="cg-chart-3"><div id="container-chart-3" class="chart-3"></div></div>

    <!--Container do Gráfico 4-->
    <div class="cg-chart-4"><div id="container-chart-4" class="chart-4"></div></div>

And this is the CSS code:

.chart-1 {
    width: 620px;
    height: 400px;
    margin: 0 auto;
    margin-left: 5%;
    box-shadow: -1px 3px 3px 3px rgb(167,167,167);
    float: left;
}

.chart-2 {
    width: 420px;
    height: 400px;
    margin: 0 auto;
    margin-left: 2%;
    box-shadow: -1px 3px 3px 3px rgb(167,167,167);
    float: left;
}

.chart-3 {
    width: 600px;
    height: 400px;
    margin: 0 auto;
    margin-left: 2%;
    box-shadow: -1px 3px 3px 3px rgb(167,167,167);
    float: left;
}

.chart-4 {
    width: 1717px;
    height: 400px;
    margin: 0 auto;
    margin-left: 5%;
    box-shadow: -1px 3px 3px 3px rgb(167,167,167);
    float: left;
    margin-top: 50px;
}

And I get something like this. Which is fine, but when the screen get smaller I want it to be something like this. To do it, I have this CSS:

.chart-1 {
    width: 100%;
    margin-bottom: 20px;
    margin-left: 5%;
    box-shadow: -1px 3px 3px 3px rgb(167,167,167);
    float: left;
}

.chart-2 {
    width: 100%;
    margin-bottom: 20px;
    margin-left: 5%;
    box-shadow: -1px 3px 3px 3px rgb(167,167,167);
    float: left;
}

.chart-3 {
    width: 100%;
    margin-bottom: 20px;
    margin-left: 5%;
    box-shadow: -1px 3px 3px 3px rgb(167,167,167);
    float: left;
}

.chart-4 {
    width: 100%;
    margin-bottom: 20px;
    margin-left: 5%;
    box-shadow: -1px 3px 3px 3px rgb(167,167,167);
    float: left;
}

.cg-chart-1 {
    width: 90%;
    height: 90%;
}

.cg-chart-2 {
    width: 90%;
    height: 90%;
}

.cg-chart-3 {
    width: 90%;
    height: 90%;
}

.cg-chart-4 {
    width: 90%;
    height: 90%;
}

And it also works properly. Both codes get me what I want, but the media query I'm using does not change the chart's properties. I'm currently using:

@media (max-width: 1200px)  {/*Code for the charts*/}

Why does the media query does not change the CSS for my charts? I must say this is the first time I use media query. Thanks in advance.

EDIT: The snippet follows with the all code for the charts. Note that if you remove the css inside the media query and replace with the actual CSS for the charts, both of them works correctly. It's only the media query that's somehow bugged.

pennyroyal

I think the problem is the order of rules. Try putting general rules first and then media queries rules under it. Right now the bottom rules are overriding rules you've put in media queries earlier.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-04-20

Comments

0 comments

TOP Ranking

Article

Responsiveness using Media Query

Responsiveness using Media Query

pump.io port in URL

grouping by column variables and appending a new variable based on condition

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

Group boxplot data while keeping their individual X axis labels in ggplot2 in R

Vector input in shiny R and then use it

BigQuery - concatenate ignoring NULL

Can a 32-bit antivirus program protect you from 64-bit threats

How to remove the extra space from right in a webview?

How to how increase/decrease compared to adjacent cell

android.content.Context.getSharedPreferences(java.lang.String, int)' on a null object reference id DBhandler

Getting 502 Bad Gateway Error While Deploying WordPress On Dockerized Lemp?

Type 'number' is not assignable to type 'NgIterable<any>' when trying to async observe a datasource

Check if a number is a perfect square

FFmpeg resize without upscaling

How do I display Label text character-by-character?

How to show an image in a View with ASP.NET MVC 5? (Many suggestions failed so far)

Json Schema - Conditional Evaluation with RegEx

PlayOnLinux displays weird looking window on 18.04 for MS Office installation

JMeter: Why get error when try to save test plan

Emulator wrong screen resolution in Android Studio 1.3