Jump to content

How to make text click-through?

Recommended Posts

I've got images with text boxes on them on my site, but when I try to click the link on the image the text box gets in the way because it's in front of the image. I tried adding the same link to the text box, however there are still small gaps where clicking does nothing. Does anybody know a solution to this? Also, I'm hoping this is possible with just CSS, I'm not on a business plan. Cheers.

URL is leonprantner.com/travelup
PW is test

Link to comment
  • Replies 5
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

 

To resolve the layering issue on your site, apply pointer-events: none; to your text boxes in CSS, allowing clicks to pass through to the image link. Additionally, adjust the clickable area of the image by tweaking the link's padding and margin, ensuring full coverage and eliminating any non-clickable gaps.

Edited by numairsohail
Link to comment
On 1/24/2024 at 8:21 PM, numairsohail said:

 

To resolve the layering issue on your site, apply pointer-events: none; to your text boxes in CSS, allowing clicks to pass through to the image link. Additionally, adjust the clickable area of the image by tweaking the link's padding and margin, ensuring full coverage and eliminating any non-clickable gaps.

Hi numairsohail, I tried this but this just removes any pointer events inside the text box, it doens't allow me to click through to the image link.

Link to comment
11 hours ago, tuanphan said:

Just a curious, I see you are using 2 text blocks over image, why don't you use 1 Text Block only?

Hi tuanphan, I wanted the two lines to be closer together, putting them both in one text box sets a fixed distance between them. Maybe it's possible to adjust the gap in CSS, I just used two blocks for now.

Link to comment
On 1/28/2024 at 9:35 PM, leonprantner said:

Hi tuanphan, I wanted the two lines to be closer together, putting them both in one text box sets a fixed distance between them. Maybe it's possible to adjust the gap in CSS, I just used two blocks for now.

You can use 1 Text Block with this CSS code to adjust gap between 2 Heading 4

body#collection-65ae87060e949c0ab050dd84 h4 {
	margin-bottom: 40px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.