Code Injection JavaScript not working - Rally theme

I am trying to change the padding on a div in the Rally theme to be more mobile-responsive (currently when on mobile, the large padding forces the text off the edge of the page (see first screenshot), whereas I want a centered div (see second screenshot).

I've put this JS code into my code injection but to no avail; I've been reading that code injection does not work on Index pages, so am thinking that might be the issue. Any advice on what to do? Following is the code (which works fine in Chrome DevTools):

<script>
   if (screen.width <= 640){
   var box = document.getElementsByClassName('newsletter-form-wrapper newsletter-form-wrapper--layoutFloat newsletter-form-wrapper--alignCenter');
     for (var i=0; i<= box.length; i++){
       box[i].style.padding = "50px";
     }
   }
</script>

Please share a working link to your website in order to see the issue and the settings in use.

If your site isn't live yet, please set a site password and tell us what it is, so that we can view it.

Hi Paul,The website is https://www.thecorsaironline.com. If you scroll to the bottom, you'll see the "Subscribe to our Newspaper" section. Thanks.

I recommend using CSS over Javascript if you're just trying to change the style on that page. To change the style of a div with the classes you mentioned above using CSS, you'd write

div.newsletter-form-wrapper.newsletter-form-wrapper--layoutFloat.newsletter-form-wrapper--alignCenter {
/* your properties and values go here*/
}

and if you're using code injection, it will have to go inside of style tags instead of script tags. Otherwise, you can just use it without the tags using custom css. The other thing to consider: if you're only experiencing problems when it's in mobile view — meaning, you like the style when it's larger than mobile — you can specify your style to only be your custom code when the screen is the mobile size. To me, your Newspaper section looks fine until it reaches 450px or so. If you agree, you could specify your code like this:

@media screen and (max-width:450px) {
   div.newsletter-form-wrapper.newsletter-form-wrapper--layoutFloat.newsletter-form-wrapper--alignCenter {
       padding: 0px;
   }
}

More information on CSS media queries can be found here. https://www.w3schools.com/css/css3_mediaqueries.asp

regarding the above code you wrote, there is an error in that you use "less than OR equal to" on line 4. Delete the equal sign and there will be no error. When I tested your code, the variable "box" is one element. The loop begins where i is 0, since 0 is less than or equal to 1, it changes the padding on box[0] (which is your element). Then i becomes 1. Since 1 is less than or equal to 1, it tries to change the padding of box[1], which doesn't exist. The error says "Cannot read property 'style' of undefined", meaning box[1] is undefined.

Hi tazmeah,Thanks for your response--unfortunately, that doesn't seem to work either. I think the issue is that most squarespace help pages are pointing me to the fact that custom code does not work on index pages. Thank you anyway though!

I know this is old, but I just wanted to clarify that Code Injection does work on index pages. I think that when the user guide says "Your code might not render if you've added it to a page within an Index", they mean that a code block on a page won't run if you then include that page on an index. However, site-wide code injection does run on index pages.