leonprantner Posted January 24 Share Posted January 24 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
numairsohail Posted January 24 Share Posted January 24 (edited) 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 January 26 by numairsohail Link to comment
tuanphan Posted January 28 Share Posted January 28 Just a curious, I see you are using 2 text blocks over image, why don't you use 1 Text Block only? 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
leonprantner Posted January 28 Author Share Posted January 28 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
leonprantner Posted January 28 Author Share Posted January 28 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
tuanphan Posted January 30 Share Posted January 30 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment