Hi there,

Indeed, it looks like the issue is coming from the page builder responsive column width + responsive image srcset size.

Can you try the following steps:

- Please navigate to Settings -> Page Builder -> Layout (horizontal tab)
- Set the 'Mobile Width' from 991 to 780
- Save the page

If you have any questions, please let me know

That's strange.. As each column is 359,58 pixels is width. The images from the featured pages are 360 pixels on a screen width that is 991 pixels or above.

Can you navigate to the services page and press ctrl + f5, so the cache will be refreshed?

Please let me know if that worked.

Thank you

Thank you for your detailed messages, it makes it much easier for me

I see the pictures are getting blurry sometimes when resizing the browser. The 'chiropratic therapy' and 'sport injuries' are also getting a little bit blurred sometimes but it is less noticeable probably due the contrast/color combination of the pictures.

I tested this on a iMac and laptop with Windows OS and noticed the issue is coming from the max-width CSS attribute that is added on all img tags (better visible on a laptop without retina screen). This CSS attribute will make the images resize if the image is larger than the container/columns it's being added to, mainly for responsive purpose, so it won't overlap. So this CSS attribute is a 'must' for a dynamic content website, and can't run without this.

I must say this too, that blurred responsive images are a common issue by resizing the browser as the correct scaled image is being served on the initial loaded screen width, and each browser have their own engine how to handle the code, easy said.

After some investigation and test I notice that setting the 'Legacy Layout Engine' to 'Always' under Settings -> Page Builder > Layout, and uploading the featured image in a size of 851x568 (or bigger in the same proportion) will give better results.

Here you can see the difference. Left is default image, right is 851x568px image.

Please let me know if that did the trick.

Another way is to bypass the responsive images by recreating the featured page widget inside the 'Text Widget' and add the following code inside the textarea:

<div class="featured-page">
    <div class="featured-page--image">
        <a href="#link-to-page">
            <img src="#link-to-image">
            <div class="featured-page--overlay">
                <div class="overlay--center">Read More link...</div>
            </div>
        </a>
    </div>
    <div class="featured-page--content">
        <h4 class="featued-page--title">
            <a href="#link-to-page">Massage Therapy</a>
        </h4>
        <p>Intro text...</p>
        <a href="#link-to-page" class="text-link">Read More link..</a>
    </div>
</div>

Hi there,

Setting a fixed width for the image container could be a solution. But if you add that CSS code to the CSS field in the customizer and than navigate to the home page you will see it mess up the 3 images from the featured page widgets there. Because the columns are a little bit smaller than on the services page.

That's why the max-width CSS value is a 'must' for a dynamic website like a WordPress website as it will scale down the images when the container is smaller than the image width. 

Of course there are always some solutions like changing the column width on the homepage, so the columns will have the same width as on the services page (3 columns wide). Or let the CSS skip the homepage, so it will target all the other pages:

@media (min-width: 1200px) { body.page-template-default .featured-page--image { width: 360px; height: 240px; border-radius: 2px; } }

Please note that using this CSS will limit the dynamic use of the Featured Page widget. For example if you add the widget in a 2 columns row, or a 4 columns row you will see it won't scale as it will overrule the default max-width CSS attribute.

Edit: Or you can skip the featured page widget and use the Visual Editor widget to rebuild something similar. By adding a image, heading and some text within the textarea. Those 3 elements could be added with default functionalities that comes with WordPress, see screenshot