Hide 'button' on mobile via CSS | Community
Skip to main content
Ayan_Talukder
Ayan_Talukder
Level 4
October 29, 2018
Solved

Hide 'button' on mobile via CSS

  • October 29, 2018
  • 1 reply
  • 12718 views

Hi all,

We have a call to action email going out with two CTAs. The email is mobile responsive but I'm trying to get the button on the top right (where the red arrow is pointing) to be hidden on mobile to avoid duplicate buttons. What would be the easiest method in hiding this? I tried using a div and CSS to hide the button but it doesn't seem to be working. I've attached our HTML code of the email. Thanks in advance!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by falvares

Hey Ayan,

I normally use media queries to hide CSS elements in mobile versus  desktop. Something like this:

@media (max-width: 480px) {

  .button {

    display: none;

  }

However, in your case if you add this piece of code you would remove both the buttons in mobile so it would be good to define a different style for the button you would like to remove like ".button1" and ".button2" and then add the respective media query as mentioned above.

Hope this helps

Would love to see if there are any other options

1 reply

F
Adobe Employee
falvaresAdobe EmployeeAccepted solution
Adobe Employee
October 29, 2018

Hey Ayan,

I normally use media queries to hide CSS elements in mobile versus  desktop. Something like this:

@media (max-width: 480px) {

  .button {

    display: none;

  }

However, in your case if you add this piece of code you would remove both the buttons in mobile so it would be good to define a different style for the button you would like to remove like ".button1" and ".button2" and then add the respective media query as mentioned above.

Hope this helps

Would love to see if there are any other options

    Ayan_Talukder
    Ayan_TalukderAuthor
    Level 4
    October 30, 2018

    Floyd thanks a lot, I really appreciate it! That did the trick, I just ran it in Litmus and it works on almost all mobile devices. We've add issues with media queries not working on Android devices but we can live with that.

    Stephen_Baker2
    Stephen_Baker2
    Level 2
    October 30, 2018

    Sometimes a CSS Armageddon approach can help with pesky clients that don't support display properly and what not:

    .hide { display: none !important; width: 0px !important; height: 0px !important; max-width: 0px !important; max-height: 0px !important; line-height: 0 !important }
    Terms & ConditionsAccessibility statement

    Loading footer...