Is it possible to change the alignment of only a portion of my text inside a button? Right now I am adding spacing, but it looks horrible on mobile.

Here's my code

#block-f1d0832f83a6b19318b9{
  .sqs-block-button-element--large {
width: 60% !important;
text-align: left;
border-radius: 10px;

}

}

You can add code for desktop & mobile. Above code for desktop, this code for mobile

@media screen and (max-width:767px) {
#block-f1d0832f83a6b19318b9{
  .sqs-block-button-element--large {
width: 100% !important;
text-align: center;
border-radius: 10px;

}
}
}

1 hour ago, tuanphan said:

You can add code for desktop & mobile. Above code for desktop, this code for mobile

@media screen and (max-width:767px) {
#block-f1d0832f83a6b19318b9{
  .sqs-block-button-element--large {
width: 100% !important;
text-align: center;
border-radius: 10px;

}
}
}

 

Thank you so much, this will very helpful when I do adjust code for mobile! However, my question still stands; Is it possible to have a portion of your text in a single button aligned to the left, and the rest of the text aligned to the right. Some like "How do beacons work?                                                    ▶"

1 hour ago, Kyler said:

Thank you so much, this will very helpful when I do adjust code for mobile! However, my question still stands; Is it possible to have a portion of your text in a single button aligned to the left, and the rest of the text aligned to the right. Some like "How do beacons work?                                                    ▶"

Can you share link to page where you insert button?

14 minutes ago, tuanphan said:

Can you share link to page where you insert button?

Sure thing - https://www.k2.life/support-center-copy

Notice the little triangle arrow, I want to shift it all the way to the right of the button without moving all of the text.

#page-section-5f0573c772537227a9e43436 a[href*="how-do-beacons-work"] {
    background: url("https://img.icons8.com/plasticine/2x/arrow.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: right;
}

Replace url with image of your arrow, that is just one I grabbed online for example.

2 hours ago, rwp said:

#page-section-5f0573c772537227a9e43436 a[href*="how-do-beacons-work"] {
    background: url("https://img.icons8.com/plasticine/2x/arrow.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: right;
}

Replace url with image of your arrow, that is just one I grabbed online for example.

Thank you so much! This worked perfectly 🙂