Upfront images not displaying full resolution.

The 3 images that are group elements displayed in the homepage are not showing on full resolution, which makes them show pixelated.

Already tried using re-generate thumbnails but it's still selecting a different size for that specific section.

Thanks in advance.

  • Predrag Dubajic

    Hi Adam,

    Hope you're doing well.

    Upfront uses 1080 as default content width and that's what it uses to calculate sizes of the elements inside the content.
    So when you add 3 elements in there each will take one third of the content width, so in your case you will have 3 elements with width of 360 pixels, and images will be adjusted to fit in that size.

    What you are doing then is using CSS to force the region to go outside of those 1080 pixels and take the entire screen width, so your images with 360 width will be stretched and because of that they will loose the their quality.

    In order to change how this is calculated you will need to have your theme content holder wider than 1080 pixels, and you can do that by creating new child theme with Upfront Builder plugin.

    When you create new theme with Builder you can go to Edit Grid options in Theme Options in order to adjust grid size:

    Also, you are using Upfront Parent theme and making changes there which is not how the Upfront theme should be used and it's not tested that way so you should be doing all Upfront changes to either one of our starter themes or on your own starter theme created with Upfront Builder.

    I'm afraid that this means that you will need to redo your current site on a new starter theme.

    Best regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.