Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 3, 2013 at 2:15 am #169679
    mhiller

    I wanted to reduce the height of the Enfold Fullscreen image slider, so with the quick CSS I inserted this:

    .avia-fullscreen-slider .avia-slideshow {
    height: 100px !important;}

    It reduced the size of the slider when viewed on a full-size screen, but in responsive mode (iphone), the slider was reduced so small that the text title could not be seen well (see here: http://acmecontentlab.com/home-4/ ). Is there a way to reduce the slider height so that it keeps the same proportions in responsive mode? Thanks, Mike.

    October 3, 2013 at 2:44 am #169700
    Josue

    Hi mhiller!

    Try putting that CSS in this file, there you can set different rules for mobile and desktop, the final code would look like this:

    @media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
	.avia-fullscreen-slider .avia-slideshow {
	height: 100px !important;}
}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .avia-fullscreen-slider .avia-slideshow {
  height: 50px !important;}

}

    Cheers!
    Josue

    October 3, 2013 at 3:02 am #169713
    mhiller

    Thanks Josue! I am assuming I can put the code in the Enfold Child theme CSS or does it have to go in the Enfold parent CSS file? Mike.

    October 3, 2013 at 3:28 am #169720
    Josue

    Hi Mike!

    I didn’t note you are using a Child theme, yes, you could add it here http://acmecontentlab.com/wp-content/themes/enfold-child/style.css

    Cheers!
    Josue

    October 3, 2013 at 4:34 am #169741
    mhiller

    Thanks Josue–Your support is awesome!!!! Mike.

    October 3, 2013 at 4:55 am #169743
    mhiller

    Oh Oh. It still doesn’t seem to be working in mobile/responsive mode even at 150px height. Could I be having browser problems (Firefox) or is it something else? Mike.

    October 3, 2013 at 7:11 am #169762
    Josue

    Hey!

    This is how i see it in mobile:

    Is this what you want?

    Best regards,
    Josue

    October 3, 2013 at 3:38 pm #169968
    mhiller

    I wanted the image to appear proportionately the same size to the screen as in full-screen mode. In your screen shot, the image container is reduced to a size that cuts off part of the image so you can’t see the electrical spark (or the slider headline text) that you see in full-screen mode. I can probably figure out a “work around,” but it would be nice if there was a fix. I really appreciate your help! Mike.

    October 4, 2013 at 3:21 am #170237
    Ismael

    Hello!

    You can use this:

    @media only screen and (max-width: 767px) {
.avia-fullscreen-slider .avia-slideshow {
height: 200px !important;
}
}

.avia-fullscreen-slider .avia-slideshow {
max-height: 250px !important;
}

    Regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Reduce height of Fullscreen slider in responsive mode’ is closed to new replies.