Image, heading, details in a section.

Hi there,

are you using the Block Editor in WordPress?
If so then it should simple enough with a Columns Block, then you can add a Heading Block and an Image Block in one column and a text block in the other column.

Let us know.

I was just using the sections within GP, is this a plugin (Block Editor)?

Aah ok - Block Editor is built into WordPress but it doesn't work inside Sections.
If you want to do this in Sections, then switch to the Text editor view in the section and add this HTML

<div class="flex-grid-container">
    <div class="grid-item flex-50">
        <div class="grid-item-inner">
            <h2>Your book Title</h2>
            <img src="full_url_to_image" alt="Alt name of image">
        </div>
    </div>
    <div class="grid-item flex-50">
        <div class="grid-item-inner">
            <p>Your book text</p>
        </div>
    </div>
</div>

Update it to include your heading, image and text.

Then add this CSS:

/* General and Mobile styling */

.grid-item {
    padding: 30px;
    box-sizing: border-box;
}

/* Desktop styling */

@media (min-width: 769px) {
    .flex-grid-container {
        display: flex;
    }
    .grid-item {
        padding: 40px;
    }
    .grid-item.flex-50 {
        flex: 1 0 50%;
    }
}

You can re-use the HTML on as many pages and sections as you need, and only add the CSS once.

That seems to work, is there a way of neatening up the section... to something like this??

do you have a link to the page with the code i provided ? Then i can tweak and send you the updated code.

yes, it's https://domjoly.tv/books/

Ok - so we move the H2 outside of the grid container, remove the sizing for the columns and let flex do its magic and then set the image to a minimum size like so:

<h2>Your book Title</h2>
<div class="flex-grid-container">
    <div class="grid-item">
        <div class="grid-item-inner">
            <img class="book-image" src="full_url_to_image" alt="Alt name of image">
        </div>
    </div>
    <div class="grid-item">
        <div class="grid-item-inner">
            <p>Your book text</p>
        </div>
    </div>
</div>

CSS:

/* General and Mobile styling */

.grid-item {
    padding: 30px;
    box-sizing: border-box;
}

/* Desktop styling */

@media (min-width: 769px) {
    .flex-grid-container {
        display: flex;
    }
    .grid-item {
        padding: 40px;
    }
    .grid-item .book-image {
        min-width: 200px;
    }
}

That seems to be working thankyou!

You're welcome