Content Slider "Learn More" button

[Robert]

Guys, the Learn More button on my content slider seems to disappear on mobile.

Where would I start to figure this one out?

I would like it to display on mobile.

Notes:

Buddypress 4.0.2 with Child theme 3.2.0

I also hide the slides from my logged-in users as per this post: https://www.buddyboss.com/support-forums/topic/hide-slides-for-logged-in-users/

The button also seems to disappear for mobile when using the Buddyboss Parent Theme (which I have not altered).

Any ideas?

[Robert]

The register and login items also seem to disappear.

[Alyssa]

@straniero we hide the button because every inch of mobile space is precious. You can unhide it with this CSS: #fwslider .readmore{display:block !important;}

Reigister and Login moved to the left sidebar because they are tied to the wpadminbar. If you want it to be more noticeable I would recommend an onion page at 50% transparency with a red arrow pointing to the register/login menu in the left sidebar.

[Robert]

@tjchester – Thanks, that has fixed the button issue!

However, the left sidebar doesn’t actually show anything when I open it in the mobile version. Here is what I mean:

http://screencast.com/t/aOufhKWjCBY

Any help much appreciated!

[Alyssa]

@straniero are you able to send me a link to your dev site?

[Robert]

Done! Thanks. 🙂

[Robert]

FYI – that sidebar works perfectly for a logged in user. It’s only logged out that there is a problem.

[Alyssa]

@straniero found out your wpadminbar is hidden from logged out users. Make it visible to logged out users and you should be all set. Could be a plugin that does this…do you have WooCommerce installed? Might be another plugin though.

[Robert]

Perfect!

Thankyou!!

[Alyssa]

Any time.

[Robert]

The Learn More button on the image slider disappears on mobile devices.

This is how to make it appear (thanks to @tjchester) (just put the below code into your child CSS):

#fwslider .readmore{display:block !important;}

However, that piece of code makes the button appear, but the button is a bit big for some screen like the iPhone. Below is how to style it.

#fwslider .readmore{display:block !important;}

@media screen and (max-width: 720px) {
  #fwslider .readmore a{
    font-size: 14px;
  }
}

Note: This is how I did it because iPhone screen were cutting off the button. This little piece of code styles the button for iPhones and also works for larger (Android) screens too.

Note: Would have added this to the other thread for folks to use, but it was locked.