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

Question

Site URL: https://www.theathleticbridge.com/

Hello, 

 

I am trying to figure out how to resize solely the background image of my mobile website, it keeps getting cutting off (as shown below).  Would I be able to edit this in CSS?  I've been trying to find some code on these forums but nothing has worked yet.  

 

Thank you! 

 

  image.png.ac68693976dde8930176dbafc5fc08f8.png

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 1
Posted (edited)
<style>
@media only screen and (max-width: 600px) {
  .section-background {
    background-color: black !important;
  }

  .section-background img {
    height: 50vh !important;
    margin-top: 25vh;
  }
}
</style>

Put this in the code injection for the page you want it to work on.

Edited by rwp

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@rwp So it worked great for the home page, however it changed my "Contact Us" page to being all black instead of the contrasting white page that it was.  Is there anyway around that obstacle now? 

image.png

image.png

Share this post


Link to post
  • 0

Make sure you put the code in the code injection section of the home page. Not in the site wide code injection area.


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

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