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

CSS Tweaks For Overlapping Image Block


Baccos

Question

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.

Link to comment
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

6 answers to this question

Recommended Posts

  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

image.png

Link to comment
  • 0
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

image.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

image.png

Do you need help?

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

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

flugelhorn-goldfish-3hfm.squarespace.com

2. (Tablet – Homepage) Equal image

flugelhorn-goldfish-3hfm.squarespace.com

3. (Tablet – Homepage) Increase content width?

flugelhorn-goldfish-3hfm.squarespace.com

4. (Tablet – Homepage) The same here

flugelhorn-goldfish-3hfm.squarespace.com

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

flugelhorn-goldfish-3hfm.squarespace.com

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

flugelhorn-goldfish-3hfm.squarespace.com

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

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

flugelhorn-goldfish-3hfm.squarespace.com

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

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

flugelhorn-goldfish-3hfm.squarespace.com

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

flugelhorn-goldfish-3hfm.squarespace.com

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

flugelhorn-goldfish-3hfm.squarespace.com

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

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

flugelhorn-goldfish-3hfm.squarespace.com

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

flugelhorn-goldfish-3hfm.squarespace.com

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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?

Link to comment
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...