How to hide Title and Pager on homepage Slider for small screens?

This topic has 5 replies, 2 voices, and was last updated 5 years, 11 months ago by Skandha.

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

Author

Posts
January 1, 2019 at 4:04 am #162519

Lydia
Participant

Hi there,
I do not like how the title and the pagers are shown on a smaller screens – tablets and mobile. The text is not readable and the pagers are over-sized. I decided that I need to hide these elements on smaller screens.

I came up with this code and it seems to be working:

@media screen and (max-width: 760px){
#feature-slider .entry-title {
visibility:hidden;
}
#feature-slider .cycle-pager {
visibility:hidden;
}
}

Do you see any errors in my code? Will it be working across all the platforms? Any suggestions?

Thank you.

January 1, 2019 at 10:38 pm #162548

Skandha
Participant

@olgasyracusegmail-com: Yes, the code should work well on all platforms. Let me know if you have anymore issues.

Kind Regards,
Skandha

January 1, 2019 at 11:32 pm #162557

Lydia
Participant

Skandha,
This code is a quick fix to the slider on my website, it is good for now while I am looking for a permanent solution. I need a responsive slider with the build-in ability to crop the image for a smaller screen, and with a better control over the text. Is it possible to use a MetaSlider plugin instead of your default slider? What file should I use (c-panel file manager)to insert the Metaslider code manually?

I really do not want to move my website to a different theme but I can’t use your slider on my website. Please help me to continue using your theme. Thank you again.

January 2, 2019 at 1:56 am #162580

Skandha
Participant

@olgasyracusegmail-com: Please post in your site URL and let me know what issues you are having with the slider so that I can help you out!
I will try solving those issues so that you don’t have to use another plugin for a feature that is already in the theme.

Let me know if this helps you out!
Kind Regards.
Skandha

January 2, 2019 at 10:42 am #162634

Lydia
Participant

http://www.johnsoncamera.com
I would really appreciate your help!

January 3, 2019 at 3:30 am #162755
Skandha
Participant
@olgasyracusegmail-com: The text not visible in the slider I think can be fixed by giving the text container a light background.
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
#feature-slider .entry-container, #feature-slider .entry-container:hover {
	background-color:rgba(0,0,0,0.6);
}
```
Also remove the above CSS code you added.
The size of slider pagers seems to be okay when I see it.

Let me know if this helps you out!
Kind Regards,
Skandha
Author

Posts