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

Posted (edited)

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.


If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

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
Posted (edited)

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