Featured image on different screens

  • Author
    Posts
  • #150330

    jaanoinno
    Member

    Is there a way to adapt featured image for different screens? Currently one of my featured images looks on on bigger screens (see here: https://ibb.co/4Zd46NJ), though the second pictures does not seems to have that problem. I am using following CSS:

    #fullscreen-header .featured-slide:nth-child(1) {
    background-image: url(‘https://inspiratoorium.files.wordpress.com/2020/01/jr1.png’) !important;
    }

    The blog I need help with is juhtimisretk.ee.

    #150342

    tarasdashkevych
    Theme Author

    Hi,
    Thank you for providing a screenshot.

    The reason why the second slide does not have such issue is because it comes with the Featured Image by default. In this case, the theme automatically adds needed CSS classes to avoid such issue. Please use this custom CSS instead:

    
    #fullscreen-header .featured-slide:nth-child(1) {
    	background-image: url(https://inspiratoorium.files.wordpress.com/2020/01/jr1.png) !important;
    	background-size: cover;
             background-position: center center;
             background-repeat: no-repeat;
    }
    

    We are planning to refactor the Front Page sliders in the future theme releases to improve performance and accessibility. So, some custom CSS might not work after the update. In this case, please feel free to open a thread in this forum and I will be happy to provide you a new solution.

    Thank you,
    Taras

    #150373

    jaanoinno
    Member

    That CSS does not give expected results: https://ibb.co/ysTmwyv

    #150374

    tarasdashkevych
    Theme Author

    It seems like the forum post has encoded quotes (url) in the custom CSS. As a result, the custom CSS has not worked. I’ve updated the custom CSS in the previous post.

    Thank you,
    Taras

    #150377

    jaanoinno
    Member

    It worked now. Great, thank you!

    #150395

    tarasdashkevych
    Theme Author

    You are very welcome!

The topic ‘Featured image on different screens’ is closed to new replies.