1

I thought I had solved my problem but now I realize that if I touch the screen to resize it the style tag is removed. I want it removed only when the width goes below 992, and then to be replaced if it's greater than 992?

jQuery:

$(window).resize(function () {
    var viewportWidth = $(window).width();
    if (viewportWidth > 992) {
        $(".container").removeAttr("style");
    }
});

Element it alters:

<div class="container" style="width: 240%;">
Dylano236
  • 305
  • 3
  • 15

1 Answers1

0

I would suggest it to use CSS solution. 

@media (max-width: 992px) {
 .container {
   width: 240%
 }
}

This way you are setting width to container only when screen is bigger then 992px.

If you are because of some reason in a need of js solution. You should:

  1. Create a function that check for window width and handle your logic if screen is bigger then 992px
  2. Call the function on load/ready event
  3. Call the function on resize wrapped in debounce function --> Can someone explain the "debounce" function in Javascript
Nikola Mitic
  • 1,298
  • 3
  • 11
  • 23
  • do I just add this to the external css file or should it be in the body or something? – Dylano236 Jan 05 '18 at 16:49
  • It's CSS. Add it to your other CSS. Or google "media queries tutorial" (but then don't click the w3schools link). –  Jan 05 '18 at 16:51
  • Cool yea it's not working when I added it but I know this is the correct answer and I just need to learn it a little better. Thanks. If I had enough reputation I'd give you guys some points. – Dylano236 Jan 05 '18 at 16:54