CSS Tweaks For Overlapping Image Block

Site URL: https://flugelhorn-goldfish-3hfm.squarespace.com/

Hi there,

I'm hoping one of you might know how to properly tweak the text specific to the Overlap Image Block style.  I was hoping to remove underlines from active links and have the background and text color change upon hover. Trying to avoid making this a global style change, so if there's something that will trigger image blocks specifically, or even more precisely this style image block, I would greatly appreciate the help.

On 7/9/2021 at 8:40 PM, Baccos said:

Site URL: https://flugelhorn-goldfish-3hfm.squarespace.com/

Hi there,

I'm hoping one of you might know how to properly tweak the text specific to the Overlap Image Block style.  I was hoping to remove underlines from active links and have the background and text color change upon hover. Trying to avoid making this a global style change, so if there's something that will trigger image blocks specifically, or even more precisely this style image block, I would greatly appreciate the help.

Hi. What is access password?

22 hours ago, tuanphan said:

Hi. What is access password?

Hi Tuan,

I think I figured out the first part. Currently I have it set up so that the links show a background linear gradient upon hover, but now I'm wondering if I can specifically target the bold text in the image title "Around the World" and put a linear gradient on that section without applying the same to the bold text below.

Access password is BaccosTest

On 7/11/2021 at 9:05 PM, Baccos said:

Hi Tuan,

 

I think I figured out the first part. Currently I have it set up so that the links show a background linear gradient upon hover, but now I'm wondering if I can specifically target the bold text in the image title "Around the World" and put a linear gradient on that section without applying the same to the bold text below.

Access password is BaccosTest

Hi. You can make "Around the World" italic. Then we will give the code to make it bold + remove italic

On 7/11/2021 at 9:05 PM, Baccos said:

Hi Tuan,

 

I think I figured out the first part. Currently I have it set up so that the links show a background linear gradient upon hover, but now I'm wondering if I can specifically target the bold text in the image title "Around the World" and put a linear gradient on that section without applying the same to the bold text below.

Access password is BaccosTest

Do you need help?

Site URL: https://flugelhorn-goldfish-3hfm.squarespace.com/

1. (Mobile – Homepage) Background image doesn’t show in full size

2. (Tablet – Homepage) Equal image

3. (Tablet – Homepage) Increase content width?

4. (Tablet – Homepage) The same here

5. (Tablet – Overlay menu) Texts are too close together

6. (Tablet – Footer) Want to make “Our Services” On the same row

7. (Tablet – ) Want to increase text width?

https://flugelhorn-goldfish-3hfm.squarespace.com/virtual-private-tastings-and-events

8. (Tablet – Our menu) Reduce white space?

https://flugelhorn-goldfish-3hfm.squarespace.com/sandwich-menu

9. (Tablet – Overlay menu > Shop) Text overlap together

10. (Mobile – Shop) Page looks very long, want to add a “Back to top” button?

https://flugelhorn-goldfish-3hfm.squarespace.com/new-england-cheese-charcuterie

11. (Mobile – Shop) Want to make 2 products/row?

https://flugelhorn-goldfish-3hfm.squarespace.com/new-england-cheese-charcuterie

12. (Mobile – Product) Want to show breadcrumb on top of product? (like on tablet/desktop)

https://flugelhorn-goldfish-3hfm.squarespace.com/new-england-cheese-charcuterie/p/jakes-aged-gouda

Hi Tuan,

Appreciate the feedback! Seems strange that Squarespace hasn't accounted for all the issues with spacing on tablets, though, I will say, most of our traffic is from desktop and mobile.  

A back to top button might be helpful on the mobile shop page for sure. How would I go about implementing that?

On 7/23/2021 at 8:02 PM, Baccos said:

Hi Tuan,

Appreciate the feedback! Seems strange that Squarespace hasn't accounted for all the issues with spacing on tablets, though, I will say, most of our traffic is from desktop and mobile.  

A back to top button might be helpful on the mobile shop page for sure. How would I go about implementing that?

Add this to Settings > Advanced > Code Injection > Footer

<a href="#top" class="t-top"><span class="arrow"></span>Top</a>
<style>
/* Back to Top */
.t-top {
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 4px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;
	display: none;
}
.t-top .arrow:before {
      font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
}
.t-top .arrow {display:inline;}
@media screen and (max-width:767px) {
	.t-top {display: block !important;}
}
</style>