Hi Jon,

In this case, you would need to customize it with the following steps:

1. Increase the max width of the ".content-width" CSS class using custom CSS (it's set to 1280px by default)

2. Create a child theme for this customization (please check out this article for how-to: https://uxbarn.ticksy.com/article/8649/ )

3. Put this code into the "functions.php" file of the child theme:

function enso_register_theme_image_sizes() {
        
        add_image_size( 'enso-full-width', 1280, 9999 );
        add_image_size( 'enso-port-list', 9999, 600 );
        add_image_size( 'enso-port-single-portrait', 600, 9999 );
        
    }

It is the function that the parent theme is using for setting up the image sizes. You can adjust the width value of the "enso-full-width" here to be more than 1280.

4. Re-upload the featured image of your portfolio items, or use this plugin to regenerate them all: https://wordpress.org/plugins/regenerate-thumbnails/ (the images' width needs to be larger than the new width you just adjusted already.)

I hope it helps.

Regards,
Paul

Hmm. Did you already increase the width of the "enso-full-width" image size in the code as mentioned previously and re-upload the featured images?

For example, if you increase the maximum width of the ".content-width" to "1500px", you would also need to adjust the "enso-full-width" to:

add_image_size( 'enso-full-width', 1500, 9999 );

Then make sure that the image you are going to use is wider than 1500px. After uploading the featured image, WordPress then can generate the 1500px width image and it will be displayed on the front end and should fit the new max width of the content area.

I just checked your homepage and it looked like this: https://cl.ly/sJCg

It seems both text and image are all in place now. So did you already manage to solve the issue?

Ah I found it. Please try this code:

.content-width {
    max-width: 900px;
}

It should help.

You can do that by using different class names for those specific pages. For example, to adjust the content-width of only the homepage, you can use it like this:

.home .content-width {
    ...
}

Or for blog pages:

.blog .content-width,
.single-post .content-width {
    ...
}

To find the class name for each page, you can use the Chrome's Developer Tools for that. Just look at the "body" tag of each page and you will find it.

Please see here for more info about the Developer Tools: https://uxbarn.com/inspecting-elements-developer-tools/