0

I'm trying to change the text on this website when the screen size is less than 650, but it's not working. I've tried the answers from Do something if screen width is less than 960 px and Resizing images when screen is less than 1024 pixels width, which did not work. Here is the link to the replit, and the code snippet is also below.

if ($(window).width() < 650) { // I've also tried (window).width() and window.width
var words = $('.words');
words.text("Hello! This is the new text!");
}
else { 
}


<div class="intro">
  <div>
    <h1 class="ele">Hey there!</h1>
    <p class="ele words">Hi! This is the old text."</p>
  </div>
  <img class="ele me" src="me.png" alt="A picture of myself.">
</div>
msanford
  • 11,803
  • 11
  • 66
  • 93
  • 1
    What did you do to debug your code? Did you add any console.logs? Or step through? What's the value of `$(window).width()`? what's the value of `$(".words").length`? Is your code running before your HTML? Try putting your code in `doc.ready`. Works fine in [jsfiddle](https://jsfiddle.net/o43w90sm/) but that runs js code last. Not everyone's going to sign up to use "replit". – freedomn-m Jul 13 '21 at 20:57
  • 1
    Side-note, you should really have a look at CSS Media Queries https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – msanford Jul 13 '21 at 20:58
  • Do you want this to fire only once or whenever the screen is resized? – Patrick Gunderson Jul 13 '21 at 21:00

1 Answers1

0

I tried your code on CodePen and it seems to work fine, maybe your script is being loaded in the wrong place or the elements you're trying to change where not created yet, maybe some more code could help see the example 

<div class="intro">
  <div>
    <h1 class="ele">Hey there!</h1>
    <p class="ele words">Hi! This is the old text."</p>
  </div>
  <img class="ele me" src="me.png" alt="A picture of myself.">
</div>

$(window).resize(function() {
  if ($(window).width() < 650) {
    var words = $('.words');
    words.text("Hello! This is the new text!");
    }
    else { 
      var words = $('.words');
    words.text("Hello! This is the old text.");
  }
})
Willian Carminatti
  • 1
  • 2