CSS for responsive FrontPage featured image, no slider

  • Author
    Posts
  • #143073

    ghfp
    Member
    Original poster

    Hello,

    For our FrontPage, we didn’t want to display the ‘featured content’ slider or container, so set a (theme recommended featured image width is 1140.. height at least 420 ) 1140 x 420px featured image and added some .css like this:

    #featured-content .featured-slide .container {
    display: none;
    }

    #featured-content .slick-slide {
    line-height: 0;
    }
    .page .front-block-title {
    display: none;
    }
    #featured-content .featured-slide {
    padding-top: 200px;
    padding-bottom: 200px;
    }

    We wanted the featured image to look like this on all devices:
    https://ghfp.org/wp-content/uploads/2019/03/ghfp_banner.jpg

    On my 3840 x 2160px UHD display right now it looks like the top and bottom have been cropped and the peace-dove is off to the left of the page content. On an MS surface with resolution of 2736 x 1824px it looks less cropped and the dove is above the first column ‘about’ sub-page. On my mobile devices the dove image is cut in portrait and landscape on rotation.

    Taras, we looked at another forum post response and tried adding more .css like this
    @media only screen and (max-width: 500px) {
    #featured-content .featured-slide {
    padding-top: 100px;
    padding-bottom: 100px;
    }
    }

    However that didn’t help, so we removed it.
    Maybe we need to modify our featured image dimensions to optimize the responsiveness on different devices (and/or) change the additional .CSS ?

    Have a nice day.

    The blog I need help with is: ghfp.org

    #143103

    tarasdashkevych
    Theme Author

    Hello,

    The background image in the Featured Content section uses a “cover” functionality, meaning the browser automatically scales the image as large as possible and maintains image aspect ratio so the image does not get squished.

    The image “covers” the entire width and height of the container. When the image and container have different dimensions, the image is clipped either at the top and bottom edges, or the left and right edges.

    It is possible to disable the “cover” functionality by using a custom CSS. You can display an original image without cutting off anything but it will cause some styling issues such as leaving some space either vertically or horizontally, or making your image to look squashed. Apply this custom CSS at your own risk.

    Solution #1:

    
    #featured-content .featured-slide .entry-thumb {
      -webkit-background-size: contain;
      -moz-background-size: contain;
      background-size: contain;
    }
    

    Solution #2:

    
    #featured-content .featured-slide .entry-thumb {
      -moz-background-size: 100% 100%;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
    }
    

    Hope this helps. Let me know if you have any other questions.

    Thank you,
    Taras

The topic ‘CSS for responsive FrontPage featured image, no slider’ is closed to new replies.