Jump to content

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.

Recommended Posts

Here's my code

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

}

}

Link to comment
  • Replies 6
  • Views 579
  • Created
  • Last Reply

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;

}
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?                                                    ▶"

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
#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.

Link to comment
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 🙂 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.