How to hide a CTA button on the mobile version of a landing page?

Store Design
, ,
1

I’m using a custom liquid section to display a header video on my landing page (https://www.snowdoniahoney.com) if it’s a desktop but is hidden on the mobile site. I’ve just added a CTA button to overlay the video and would like to hide that too on the mobile site but am a bit clueless. This is the code I have…


	
	[ Explore Our Honey  ](https://www.snowdoniahoney.com/collections)

Any help would be appreciated!

2

Hello @Alun ,

I understand you are looking to hide the ‘Explore Our Honey’ CTA button from the mobile screen.

You can implement this change by adding the below mentioned code.

Please follow the below mentioned steps-:

  1. Go to Online Store → Themes → Click on Three dots(Action) → Edit code.

  2. Search for the theme.liquid file and open it.

  3. Next add the below mentioned code at the bottom of the theme.liquid file before tag.

@media screen and (max-width: 767px) { a.cta-btn.button { display: none; } }
  1. Save

After adding the code, CTA button will be removed from mobile screen https://prnt.sc/dhHS0j1mJFvg

I hope the steps helps you

Please let me know if you have any issues or need further assistance.

Thank you.

1 Like
3

Hi @Alun ,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

Result:

makkaomakka_0-1701080422308.png
makkaomakka_0-1701080422308.png488×301 33.6 KB

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

1 Like
4

Hi @Alun

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

a.cta-btn.button {

display: none !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like