theuq

Thank you again @tuanphan! That worked well. So, I used your logic to add other tiles in the mix as well and wanted to check if this is okay even though it's working? <script> $(document).ready(function() { $(".fe-block-5b3ad618d85dc21a716a, .fe-block-6059bf2d94c8136d0a2e, .fe-block-yui_3_17_2_1_1698949961000_71039").click(function() { var link = $(this).text(), href = "/services#audits"; window.location.href=href; }); $(".fe-block-9170e3f6af7ca5dec93f, .fe-block-84581ef9e5cb3897ea56, .fe-block-1c1575199307ba414124").click(function() { var link = $(this).text(), href = "/services#measurement_strategy"; window.location.href=href; }); $(".fe-block-d3ad58917ca9dd4c8f7b, .fe-block-56c016aa102d56bc9fcc, .fe-#block-9100eb19999ae9684404").click(function() { var link = $(this).text(), href = "/services#data_collection"; window.location.href=href; }); $(".fe-block-4d8b5fea1940e19039fc, .fe-block-2a8f42e9830a7c456964, .fe-block-ec8d0014852df5a23405").click(function() { var link = $(this).text(), href = "/services#analysis"; window.location.href=href; }); $(".fe-block-18517888e82427bf7288, .fe-block-bee1037f3fbdd96a57bb, .fe-block-9269f2f4a3286a1ac68f").click(function() { var link = $(this).text(), href = "/services#visualisation"; window.location.href=href; }); $(".fe-block-46480a97c8ddc4a14011, .fe-block-c5fc181b9f26d2318a46, .fe-block-81512a8ad410792ed3a8").click(function() { var link = $(this).text(), href = "/services#cro"; window.location.href=href; }); }); </script> Again, thank you so much!

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

Hey everyone! I see different sizes of titles on desktop and mobile and want to make sure they look consistent but that doesn't seem to be the case. 1. The title on the homepage hero has a different size vs other pages 2. Blog post titles were showing up weirdly so I tried to fix them on desktop and mobile for better readability with some CSS (added below) Goal: To have consistent, good-looking font sizes for titles across the website on all devices. Don't mind any suggestions for paragraphs either. /* Common styles for custom H2, H3, and H4 on all devices */ .blog-item-wrapper h2 {font-size: 30px !important;} .blog-item-wrapper h3 {font-size: 25px !important;} .blog-item-wrapper h4 {font-size: 20px !important;} /* Mobile blog titles */ @media screen and (max-width: 767px) { .blog-item-wrapper h2 {font-size: 25px !important;} .blog-item-wrapper h3 {font-size: 20px !important;} .blog-item-wrapper h4 {font-size: 15px !important;} } /* Tablet blog titles */ @media screen and (min-width: 768px) and (max-width: 1024px) { .blog-item-wrapper h2 {font-size: 25px !important;} .blog-item-wrapper h3 {font-size: 22px !important;} .blog-item-wrapper h4 {font-size: 18px !important;} } /* Fix h2, h3, h4 padding on blog*/ .sqs-block-code, .sqs-block-code * { margin: 2px !important; padding: 2px !important; } Thank you very much! Appreciate all the help here. Found tuanphan and Ziggy quite helpful already!

Ah okay! Thank you!

Ah, thank you, Ziggy! That worked! Can you please explain why we'd have to use the following code? .sqsrte-large, .sqsrte-small

Hey everyone! I am trying to align the text for one of the pages to the centre on mobile only using the page collection ID but it isn't working correctly it also targets other pages like the blog posts, so I'm not sure why. @media screen and (max-width: 767px) { #collection-64cffc9994e65d76b69494af h1, h2, h3, h4, p { text-align: center !important; }} Many thanks!

Thank you very much tuanphan! That worked!

Hey Everyone! Thanks to these forums and Google, I've been able to set up the SVG logo which is working fine on desktop and mobile. But I'd also like to have another logo with a very small variation on mobile overlay (when you click the burger menu). Current CSS on the website: /* Hide the normal logo */ .header-title-logo img, .header-mobile-logo img { visibility: hidden !important; } /* Set background image to be the SVG logo */ .header-title-logo a, .header-mobile-logo a{ /* Change the "left" below to "center" or "right" if you want the logo positioned in the middle or on the right */ background: url(https://www.dataterminus.com/s/bold-wb-cropped.svg) no-repeat left !important; background-size: contain !important; }