[Solved]Button responsive behavior


#1

Hello community,
iam new at web development and ionic. I have a problem with a button in my app. On my desktop screensize I show an icon with text. When the size is now on small screen, the text is cutted off. I want to show only the icon at this point. How can i handle the problem?

Thank you.


#2

When you have a button like this (I added a span around the button text, compared to docs this is custom)

<button class="button">
  <i class="icon ion-loading-c"></i>
  <span class="button-text">Loading...</span>
</button>

And in your css:

@media (max-width: 500px) {
  .button-text {
    display:none;
  }
}

Of course you have to decide which amount of pixels you use yourself :wink: I just use 500px as an example.


#3

Thank you it works fine for me.