-
Posts
-
Hi there
I know this topic has been addressed in various forms before. However, I have tried a number of the suggestions and none seem to work. I have a LayerSlider with the settings: fullwidth, responsive, responsive under 1140, hide under 500px, height=320px. Looks great on all desktops, OK on tablets … but on mobile sizes, it’s not high enough to make sense. Can I set a min-height using a media query?
Using “@media only screen and (max-width: 767px)” … and …
.page-id-268 .avia-layerslider { min-height: 200px; !important }
I can get the space allowed for the slider to fix at 200px, but the slider itself does not display at 200px.However, the css that seems like it should work …
.page-id-268 #layer_slider_5 { min-height: 200px; !important }
has no effect at all.Any solution?
Hey JaneJoyce!
Layer slider does have an option, to control it through the media queries from it settings, while creating it.
have you worked with those settings?Cheers!
BasilisHey Basilis. Yes, I’ve tried that too but haventn’t been able to set a min-height. Perhaps I’m targeting the wrong style?
Hey!
I tried to open the link you have provided, but I get “Sorry, Page Not Found!”. We need to inspect the elements on your layerslider, so please check.
Regards,
AndySorry Andy, the client re-set the URL designations this morning. New address attached below. Still not found a suitable solution for a min-height.
Hey!
try this code:
@media only screen and (max-width: 767px) { .ls-inner { min-height: 151px !important; }}Cheers!
AndyThanks Andy, but no visible effect! I can get the height of the space allowed for the slider to enlarge, but not the slider itself.
Cheers
JaneHey!
in addition to my code above, use this code as well:
@media only screen and (max-width: 767px) { div#layer_slider_1 { height: 151px !important; }}and adjust as needed.
Best regards,
AndyThanks again Andy. One step closer. The background to the slider is now displaying at the right min-height, but nothing I have tried will get the slide content (image and text) to conform to a min height. A percentage minimum would do as well. Any ideas on that?
By the way, I have had to restore the settings, as this site is live, so you won’t see the min-height affect at the address I gave, I’m sorry.
Hey!
will be quite difficult to controlling every single element of your layerslider.
Try this for the portrait image:@media only screen and (max-width: 767px) { img.ls-l.ls-preloaded { min-height: 150px !important; }}This for title font:
@media only screen and (max-width: 767px) { h2.ls-l { font-size: 14px !important; }}And this for subtitle:
@media only screen and (max-width: 767px) { h5.ls-l { font-size: 9px !important; margin-top: 5px !important; }}Best regards,
AndyMany thanks Andy. These worked very well in relation to the font size, but not so well for the portrait. The effect looked like the image height was indeed being maintain but not the width (making the image looked squeezed). But in any case, it was cropped by the ‘view area’ (don’t know what else to call it), which was still the mini size …. i.e. it would seem that there’s a space allowed for the image controlled by a class or code somewhere, which is separate from the sizing of the image itself. Hmm.
Have kept all your styling except the img one. Not exactly looking the way it should but more acceptable on a mobile than when I started. At the least the type can be read. If anything else occurs to you, I’d gladly try it.
Hi!
to control image width use this as well:
@media only screen and (max-width: 767px) { img.ls-l.ls-preloaded { width: 150px !important; }}Cheers!
AndyThanks again Andy. I also added ….
.ls-slide { min-height: 140px !important; }
and that combined with the styles you sent cracked it! Hurray!
I think “ls-slide” is the one controlling the size of the viewing area allowed for the image and text, so setting it too eliminated the image cut-off effect.Brillian theme and brilliant support. Cheers!
Jane
- The topic ‘Controlling the height of a LayerSlider using a media query’ is closed to new replies.