theuq

Oh wait, I see what you mean. It does go to the services page, but it just doesn't show that 'hand' icon. Can we please make it show a hand icon when it hovers like it's a clickable link? And also I think it will work for others as well.

@tuanphan Yeah, I had added the code on the 'text' so all of them go to the services page but the icons above aren't clickable.

@tuanphan Thank you! I added to the footer but it doesn't seem to be working, unfortunately.

@tuanphan Hi! Just quickly following up.

@tuanphan Sorry, here's the page. https://www.dataterminus.com/ (right on the homepage).

Hey everyone! Just want some help in making the Services tiles clickable so they take to their section on the services page. The graphics are SVG so they are already in a code block, so I tried adding the URL e.g. <a href="https://www.dataterminus.com/services#audits"</a> (with different variations of the 'a' tag) on the same SVG block and a separate code but it won't work. The parts I want clickable are highlighted below. The SVG code looks like this: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> <svg height="80px" width="80px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 495.2 495.2" xml:space="preserve" fill="#000000"> <g id="SVGRepo_bgCarrier" stroke-width="0"/> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> <g id="SVGRepo_iconCarrier"> <circle style="fill:#e6e6e6;" cx="174.6" cy="176" r="144"/> <path style="fill:#ffffff;" d="M318.6,176c0-40-16-76-42.4-102.4c-20.8-11.2-44-17.6-69.6-17.6c-79.2,0-144,64.8-144,144 c0,40,16,76,42.4,102.4c20.8,11.2,44,17.6,69.6,17.6C253.8,320,318.6,255.2,318.6,176z"/> <path style="fill:#fdd140;" d="M174.6,8C81.8,8,6.6,83.2,6.6,176s75.2,168,168,168s168-75.2,168-168S267.4,8,174.6,8z M174.6,312 c-75.2,0-136-60.8-136-136s60.8-136,136-136s136,60.8,136,136S249.8,312,174.6,312z"/> <path style="fill:#000000;" d="M484.2,441.6c11.2,11.2,11.2,28.8,0,40l-5.6,5.6c-5.6,5.6-12.8,8-20,8s-14.4-2.4-20-8L269,318.4 c-27.2,17.6-59.2,28-93.6,28c-36.8,0-71.2-12-99.2-32l-12.8,12.8c1.6,3.2,2.4,7.2,2.4,10.4c0,13.6-11.2,24.8-24.8,24.8 s-24.8-11.2-24.8-24.8s11.2-24.8,24.8-24.8c3.2,0,7.2,0.8,9.6,2.4l12-11.2c-36.8-32-60-78.4-60-130.4C2.6,77.6,80.2,0,175.4,0 s172.8,77.6,172.8,172.8c0,5.6,0,10.4-0.8,15.2h7.2c3.2-9.6,12.8-16,23.2-16c0,0,0,0,0.8,0l55.2-95.2c-3.2-4-5.6-9.6-5.6-16 c0-13.6,11.2-24.8,24.8-24.8c13.6,0,24.8,11.2,24.8,24.8S466.6,85.6,453,85.6c-1.6,0-3.2,0-4-0.8l-53.6,92.8c4.8,4.8,8,11.2,8,18.4 c0,13.6-11.2,24.8-24.8,24.8c-10.4,0-20-7.2-23.2-16.8h-8.8c-4.8,24.8-15.2,48-28.8,67.2L484.2,441.6z M472.2,469.6c4-4,4-11.2,0-16 l-46.4-46.4l-21.6,21.6l46.4,46.4c4,4,11.2,4,16,0L472.2,469.6z M391.4,416l21.6-21.6l-108-108c-6.4,8-14.4,14.4-21.6,20.8 L391.4,416z M331.4,172.8c0-85.6-69.6-156-156-156s-156,70.4-156,156s69.6,156,156,156S331.4,258.4,331.4,172.8z"/> <path style="fill:#fdd140;" d="M472.2,453.6c4,4,4,11.2,0,16l-5.6,5.6c-4,4-11.2,4-16,0l-46.4-46.4l21.6-21.6L472.2,453.6z"/> <path style="fill:#81d8ca;" d="M413,394.4L391.4,416l-108-108c8-6.4,15.2-13.6,21.6-20.8L413,394.4z"/> <g> <path style="fill:#000000;" d="M297,188.8c0.8-5.6,1.6-10.4,1.6-16c0-62.4-48-114.4-109.6-120.8c-4-0.8-8-4-8-8v-1.6 c0-4.8,4-8.8,8.8-8c70.4,7.2,125.6,66.4,125.6,139.2c0,79.2-66.4,143.2-146.4,139.2c-72-3.2-130.4-63.2-132.8-135.2 c-1.6-41.6,16-79.2,44-105.6c5.6-4.8,14.4-1.6,14.4,6.4c0,2.4-0.8,4.8-2.4,6.4c-24,22.4-38.4,53.6-38.4,89.6 c0,38.4,17.6,72,44.8,95.2l60.8-60.8c-1.6-3.2-2.4-6.4-2.4-9.6c0-13.6,11.2-24.8,24.8-24.8c10.4,0,19.2,6.4,23.2,16h92V188.8z M293,205.6h-88c-3.2,9.6-12.8,16.8-23.2,16.8c-4,0-8-0.8-11.2-2.4l-58.4,58.4c20,12,44,18.4,68.8,17.6 C234.6,292.8,279.4,255.2,293,205.6z"/> <path style="fill:#000000;" d="M165.8,43.2L165.8,43.2c0,4.8-3.2,8-7.2,8.8c-12.8,1.6-24.8,5.6-36,11.2c-5.6,3.2-12.8-0.8-12.8-7.2 c0-3.2,1.6-6.4,4.8-8c12.8-6.4,26.4-10.4,41.6-12.8C161,34.4,165.8,38.4,165.8,43.2z"/> </g> </g> <a href="https://www.dataterminus.com/services#audits"/> </svg> I'd appreciate any help! Thank you!

@tuanphan Thank you! I tried playing with that but didn't help because it gets fixed on desktop but then doesn't work on mobile. I just want it to look better on both devices and not sure how to go about it.

I've used the following code given by @tuanphan to another user but I don't think it will work well with the social icon placement in the header and also the alignment on mobile doesn't work well if it works well on desktop as I can't resize the blue code block dimensions to centre it properly. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous"> <ul class="t-social"> <li> <a href="https://www.linkedin.com/company/dataterminus" target="_blank"> <i class="fab fa-linkedin-in"></i> </a> </li> </ul> <style> /* code block padding top bottom */ .code-block { padding-top: 0; padding-bottom: 0; } /* social icons code */ .t-social { display: block; margin: 0 auto; padding-top: 5px; text-align: left; padding-left: 0; } .t-social li { display: inline-block; margin: 0; line-height: 100%!important; } .t-social li i { font-size: 30px; margin: 0 20px; color: #FFFFF; } .t-social li:hover i { color: #FDD140; } ul.t-social li:before { display: none !important; } </style>

Hi everyone! Hope you're doing well. Just having a weird issue popup recently where I can see the social icons when editing the site but become invisible on the published version. Any idea what might be causing it and how we can fix it? I've tried a few things on the forum like removing and adding again but no joy. It's in the footer and header. Many thanks!

Hi everyone! Hope you're doing well. Just having a weird issue popup recently where I can see the social icons when editing the site but become invisible on the published version. Any idea what might be causing it and how we can fix it? I've tried a few things on the forum like removing and adding again but no joy. It's in the footer and header. Website: https://www.dataterminus.com/ Many thanks!

Thank you @tuanphan! That worked!

@Ziggy Sorry to bother you about it but I noticed that the text in the footer also comes center-aligned for that one page. Is there any way we can keep the highlighted text left-aligned? I've tried the below code and a few iterations but that didn't work. @media screen and (max-width: 767px) { section[data-section-id="64cfffb4aae68f02a5739844"] { text-align: left !important; } }

Thank you for having a look Ziggy! I tried to fix it using rem as you mentioned from the interface vs using CSS except for the blog(s). So, if it looks good enough then I think we are good! 🙂

Thank you, Ziggy! Here are the pages: homepage https://www.dataterminus.com/services https://www.dataterminus.com/blog https://www.dataterminus.com/contact I believe you might be right there!

Yeah, that's what I was trying to do with p1 etc. but didn't work. 🫣