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

Question

Hello everyone !
I am almost done with my website, super thrilled about that. I still have a few issues regarding my section overlay :
https://www.qualitycupofcoffee.com/english
It concerns the 2nd Overlay "Consulting" for the consulting box. I created a "page" for my text box that I tried to overlay on the previous section. It works fine for the top of the box (white background) however the background colour of my page is hidden under the background colour of the next section (pink).

I really want to have the full section in white. I am struggling to make the half bottom of the box come above the next section. In the meantime I coloured the text in grey to create that visual separation effect but that's not what I want ... 

Any thoughts?
Best

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0

I'm not exactly sure what you want to change. I looked at it quick on mobile. A lot of the font is almost the same color as it's back ground.

Your back to top button and one other thing are over hanging to the right also. When the page loads, it's wider than the screen, giving a left to right scroll on my phone.

Can you post some screen shots of what you need changed?

Screenshot_20200711-063642_Firefox Beta.jpg


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

Oh my god ! I didn't spot that side problem on mobile. It's probably due to my button position, I just have to bring it back to the middle of the box and it should be fixed.

-> I removed the "grey color" which makes it confusing so you can see what problem I am trying to "hide". You see my white background colour is not appearing at the bottom. It's like it can't go above the pink colour ... 
 

Screen Shot 2020-07-11 at 14.39.54.png

Edited by ManonLarrieu

Share this post


Link to post
  • 0

It's on top already, you just have a transparent background right now. 🙂

#consulting-service-1.Index-page {
    background-color: white;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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
@media only screen and (max-width: 640px) {
  #consulting-service-1 [id^="block-7dfd23ca259154eb501e"] .sqs-block-content {
    right: 1% !important;
  }
}

I think this should fix the button on mobile too.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

One last thing, make sure you set up fall back images or set background colors for your video backgrounds.

The videos don't load on my phone and you can't read the text.

 

Screenshot_20200711-091451_Firefox Beta.jpg

Screenshot_20200711-091503_Firefox Beta.jpg


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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

I think just setting your background color of the body of the page should fix that issue too. Right now its set to that light color. This sets it to the dark color you have been using.

#collection-5d30a903f44849000182e85e {
    background-color: #002d33 !important;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

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