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

Link to comment
  • Replies 6
  • Views 1.4k
  • Created
  • Last Reply

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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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.

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.