[IMCQuickCare]

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]

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]

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]

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;
	}
}