How to bring all share buttons to one line on mobile device? in WordPress

I am trying to style my web site to be displayed properly on mobile devices, and ran into an issue with my “share” buttons at the bottom of each page’s post.

Using the developer tools (chrome), I change the device to iPhone 5 and the orange share buttons at the bottom of the page get formatted so that 3 buttons are on the same line as the text “Share This” and 3 buttons are on a new line. I would like all the orange buttons to be on the same line below the text.

This is how it looks on mobile: http://imgur.com/QBJyqsT

Here is the URL to the site: http://50.87.248.154/~thetinat/eco-tips/

The links are contained within the class ssba, and are URLs, so I have tried selecting them using various combinations of .ssba a and .ssba img (all within the @media query selector) but am still unable to bump them down to the new line. I’ve tried changing the width, size, etc but cannot figure out how to push them down.

Please let me know if anything is unclear and I will do my best to clarify.

Thanks! 🙂

Post Views: 2

1 comment

This might not be the most elegant solution but it does the trick.
You can add a pseudo-selector on the first link-element to make a space like this:

.ssba a:first-of-type:before {
    content: ' ';
    display: block;
}

Regarding cross-browser compatibility both :before and :first-of-type have good support. See here: http://caniuse.com/#search=%3A%3Abefore and http://caniuse.com/#feat=css-sel3

Comments are closed.

Related posts

1 comment

Social Network