Put white border around block of text over mobile & tablets

COwebmaster
COwebmaster used Ask the Experts™
on
Over mobile and using CSS, how can I put a white border around where it says "Make an Impact Today". I can get it to work over desktop but not over smaller devices like phones and tablets. Here is the url... http://ccdenver33.staging.wpengine.com/get-involved/

Any ideas experts?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Web Developer
Commented:
The css you applied to that span isn't working because the HTML served when on a mobile device is different.

You need to apply the same border and padding to this selector (which is already in your css):
.fl-row .fl-col .fl-node-5afdd221b1d79 h1.fl-heading .fl-heading-text

Open in new window

Author

Commented:
That's great. And one other question is how can I make that button smaller over mobile so that it doesn't cover that background image?
David KellyWeb Developer

Commented:
Change your font size in the same selector as before:
.fl-row .fl-col .fl-node-5afdd221b1d79 h1.fl-heading .fl-heading-text {
    color: #fff;
    padding: 15px;
    border: 2px solid #fff;
    font-size: 15px;
}

Open in new window

Author

Commented:
Thanks!
David KellyWeb Developer

Commented:
Glad to help!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial