Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1472322

    I’m still new to WordPress/Enfold and I’m trying to set the thumbnail for a post slider to the same height.
    In the link of the test page, the post slider after the first image has one thumbnail that is at 1210 x 420, and the others 1080 x 420.
    I want them all to appear at a certain height, preferably the same height as the one with the 1210 x 420 dimension.
    The slider’s image size is set to “Entry without sidebar (1210×423)”.

    Below is the custom css I added over the course of solving multiple issues, so some of them may be working against each other. I would appreciate any advice about the custom css below or any additional one(s) that could achieve the look I want.

    #top .avia-content-slider .slide-entry-title { font-size: 1em; }
    
    #top .post-entry .blog-categories {
      	font-size: 0.9em;
        font-weight: normal; }
    
    #top .content .entry-content-wrapper {
    	padding-right: 0px;
    }
    
    #top .avia-slideshow-inner {
    	float: center;
    }
    
    #top .avia-content-slider .slide-entry-wrap {
    	float: center;
    }
    
    #top .avia-content-slider-inner {
    	margin: 0px;
    	overflow: hidden !important;
    }
    
    #top .avia-content-slider {
    	display: flex;
    }
    
    #top .avia-content-slider .slide-image img{
    	height: auto !important;
    }
    
    .avia_desktop .avia-content-slider .avia-slideshow-arrows a{ opacity: 1; }
    
    @media only screen and (max-width: 479px)
    {
    	.responsive #top #wrap_all .slide-entry{width:48%; margin-left:4%}
    	.responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd,
    	.responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even{margin:0; clear:both;}
    	.responsive #top #wrap_all .avia-content-slider-odd  .slide-entry.first{margin-left:0; width:100%;}
    	.responsive .avia-content-slider .slide-image img { width: 100%; }
    	.responsive #top .avia-slideshow-arrows a{ 
    		display:block !important; 
    		opacity: 1; 
    		font-size: 20px; 
    		width: 60px;
    		height: 60px;
    		top: 30%;
        margin: -30px 0 0;
    		text-align: center;
    	}
    }
    
    #top .scroll-down-link {
        height: 60px;
        width: 80px;
        margin: 0px 0 0 -40px;
        line-height: 60px;
        position: absolute;
        left: 50%;
        bottom: 25px;
        color: #263238;
        text-align: center;
        font-size: 70px;
        z-index: 100;
        text-decoration: none;
    	  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0);
    }
    #1472331

    Hey Nancy,

    Thank you for the inquiry.

    You may need to upload images with the same size and aspect ratio to make sure that all slides have the same height. Alternatively, you can try this css code, but it may slightly adjust the width of smaller images.

    .avia-content-slider .slide-image, .avia-content-slider .slide-image img {
        max-height: 258px;
        width: auto;
    }

    Best regards,
    Ismael

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.