Jump to content

Code Injection JavaScript not working - Rally theme

Recommended Posts

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>





screen-shot-2019-08-28-at-10001-pm.jpg.66f5548dbe45bfd5e56fe7aa81734038.jpg

screen-shot-2019-08-28-at-10016-pm.jpg.1041a82d18b0e1e79abc4863bbb80413.jpg

Edited by corsair
Initial Revision
Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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

Link to comment

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.

Edited by tazmeah
Initial Revision
Link to comment
  • 1 year later...

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.