How to change html data-start-height by Media Queries?

Question

How to change html data-start-height by Media Queries?

Navigation

#1 by (2 votes)

2

I have a site based on a template that I bought in themeforrest, the homepage banner for this site has its height adjusted by this attribute: data-start-height (which I had never used, I know html and css intermediately). I would like to change this attribute according to the user's device by media queries, I know to change the default height css, but I would not like to tweak the html structure of the site so I was wondering if it's possible to modify this data-start-height by means of queries or another similar solution.

<section class="main-slider" data-start-height="550" data-slide-overlay="yes">

html css media-queries height

asked by anonymous 11.09.2017 / 20:16

1 answer

ID of tables out of order AngularJS Filter multiple table fields

score 2 · Answer 1

You can try:

$(window).resize(function(){
    if ($(window).width() <= 800){  
        $(".main-slider").attr("data-start-height", 500);
    }else if($(window).width() <= 600){
        $(".main-slider").attr("data-start-height", 350);
    }
    // ...
});

The $(window).resize(function(){...} executes when the page is resized.

With $(window).width() you get the screen size width and check if it is less than 600px, 500px, 800px ...

And according to the screen sizes you set a value for data-start-height with:

$(".main-slider").attr("data-start-height", 500);