Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
corsair

Code Injection JavaScript not working - Rally theme

Question

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

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 1

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.


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm usually booked six weeks in advance for jobs longer than an hour.
Prebuilt Squarespace Extensions
Custom Squarespace Extensions: Tell me about the functionality you need

 

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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!

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...