Banner Not Showing On Mobile

This support request was posted in Paeon by IMCQuickCare

Request ID #34861 In Progress

IMCQuickCare October 29, 2017 at 5:02 pm
Hello. On my site, I have added text and a CTA button to the image at the top of the screen on the home page. This shows on desktop but not on mobile. Is there any custom CSS I can add to make it appear on mobile? Please let me know if this was unclear.
Juanfra Aldasoro October 30, 2017 at 1:21 pm
Hello,
Thank you for writing. I hope you are doing well.
The slider caption is hidden in mobile devices because of a design decision. You’ll need to add some CSS rules to .flex-caption for the responsive styles in order display it.
Something like this should work:
```
@media screen and (max-width: 1024px) {
.flex-active-slide .flex-caption,
	.flexslider .slides li:first-child:nth-last-child(1) .flex-caption,
	.flexslider .slides li:only-child .flex-caption {
		display: block;
	}
}

@media screen and (max-width: 880px) {
.flex-active-slide .flex-caption,
	.flexslider .slides li:first-child:nth-last-child(1) .flex-caption,
	.flexslider .slides li:only-child .flex-caption {
		display: none;
	}
}
```
Best,
Juan.
IMCQuickCare October 30, 2017 at 3:30 pm
Hey Juan, thanks for the quick response. This now shows the picture on mobile, but it does not show the text. Anything else we can do to fix that?
Juanfra Aldasoro October 30, 2017 at 5:49 pm
Hello,
Thank you for your prompt response.
Please try the following CSS:
```
@media screen and (max-width: 880px) {
        .flex-active-slide .flex-caption,
	.flexslider .slides li:first-child:nth-last-child(1) .flex-caption,
	.flexslider .slides li:only-child .flex-caption {
		display: block;
	}
}
```

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Banner Not Showing On Mobile

Login to your Account

Create a Free Account