Home Forums Pro Themes Kids Education Pro add feature icon to section feature

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #171789
    Bianca Ackermann
    Participant

    Hi
    I want to display the feature images in the section feature.
    But I can only add there awesome icons.
    Is there a way to change the css to display the feature images above the feature header?

    #171803
    Psink
    Keymaster

    Hello Bianca

    It’s not possible with the CSS only. So we have updated the theme. Please update the theme after the release

    And follow the screen record – on how to use Featured Image instead of icon
    https://www.awesomescreenshot.com/video/6250529?key=3e8eed7635f98c7fcd30fa6de6317aa1

    #171807
    Bianca Ackermann
    Participant

    Hi Psink

    Thx for the Update and the video :).
    Is it possible to change the size of the feature image.
    It is to large.
    Maybe the size like on this site: http://ahoiii.com/

    Regards

    Bianca

    #171808
    Psink
    Keymaster

    Can you please share your site URL? We will provide you an additional to change the size of the featured image

    #171809
    Bianca Ackermann
    Participant
    #171813
    Psink
    Keymaster

    Please add this CSS in the Additional CSS

    
    #features .featured-item {
        width: 230px;
        text-align: center;
        margin: auto;
    }
    
    #features .features-image{
        padding: 80px 0;
        border-radius: 20px;
        max-width: 170px;
        width: 100%;
        margin: auto;
        text-align: center;
        display: inline-block;
    }
    

    After adding the above your site looks something like this
    https://www.awesomescreenshot.com/video/6254339?key=c692b9b26f318bb14526553803bb4d23

    #171814
    Bianca Ackermann
    Participant

    Thx. Is there a way to use the thumbnails? The images are cut off and it looks not so very well

    #171816
    Psink
    Keymaster

    Ahh ok, please replace the code with #features .features-image by below code

    
    #features .features-image {
        padding: 60px 0;
        border-radius: 20px;
        max-width: 180px;
        width: 100%;
        margin: auto;
        text-align: center;
        background-size: contain;
        display: inline-block;
    }
    

    The design looks like this
    https://www.awesomescreenshot.com/image/17807602?key=a7b4f8d9e123e8a429015d172359c9e3

    #171827
    Bianca Ackermann
    Participant

    Thx. If you find a way to use thumbnails instead of the normal feature images let me know. Then I donĀ“t need to resize it.

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