CSS to reduce space either side of text and buttons in mobile view of list sections

Site URL: https://sadiespikescuriouscabinet.com/alternative-art-school-bristol

Hi, I'm looking to reduce the amount of space each side of text and buttons in a list section on mobile view only.

The web copy is being displayed in a narrow central area meaning that some of the words, and specifically the buttons are forced to drop vertically over several lines, rather than run across one line horizontally.

Does anyone know of a css fix for this please? Thanks!

Edit this code in Custom CSS

@media only screen and (max-width: 640px) {
    .sqs-block-button-element {
        width:50%
    }
}

to this

@media only screen and (max-width: 640px) {
    a.sqs-block-button-element:not(.list-item-content__button) {
        width:50%;
    }
}

also, I see you are using some invalid font face code (the urls in code doesn't exist)

@tuanphan Thanks so much for this! It's perfect now 🙂

I'll email you about the invalid font face code 👍