Wrapping feature image around content created via ACF

[Ella_N]

Hello I have used ACF to customise the post output and I am trying to wrap the feature image on the right of the content. What happens is that the image moves right but leaves a left gap of equal size between the image and the content.
I suspect this may be to do with the location of ACF but I wonder if you could help me to find a solution for this.

I have added the following css code .single-post .entry-featured {width:50%;float: right; margin-left: 30px;} but it does not seem to resolve the issue.

[thai]

Hi There,

Please wrap a <div> around the h5 tags, something like this:

<div class="single-acf-wrap"> 
            <h5>Tag number: &nbsp;</h5>
            <h5>How long fishing?: &nbsp;<span style="color:red; font-style:italic;"></span></h5>
            <h5>Favourite lure/bait: &nbsp;</h5>
            <h5>Home port: &nbsp;</h5>
            <h5>Boat name: &nbsp;</h5>
            <h5>Boat registration: &nbsp;</h5>
            <h5>Boat length: </h5>
            <h5>Types of fishing: &nbsp;</h5>
            <h5>Who buys your fish: &nbsp;</h5>
            <h5>Website: &nbsp;<a href="">  </a></h5>
            <h5>Social media page: &nbsp;<a href="">  </a></h5>
            <h5>Image Gallery: <br> </h5>
</div>

Then change your custom CSS to this:

.single-post article {width:50%;float: right;}

Let us know how it goes!

[Ella_N]

Fantastic support as usual, yes this almost does the job!
Just two issues: the first is that for some reason the title of the post now sits above the photo (see image below) and secondly, is it possible that when viewed on a mobile phone the picture floating properties are ignored so that the content lines up underneath as it would normally?

[nabeel]

Hi again,

To fix title and mobile floating issue, please replace the previous code with the following code:

@media screen and (min-width: 768px) {
    .single-post article header.entry-header {
        position: absolute;
        left: 0;
    }
    .single-post article {
        width: 50%;
        float: right;
    }
    .single-acf-wrap {
        padding-top: 30px;
    }
}

Cheers!

[Ella_N]

perfect!!! Thank you so much for the magnificent support!

[thai]

You’re welcome.