Hello Paul. As this thread is pretty old now, I’m not sure whether you are still likely to receive notifications when I add a new post, but hopefully, you will. If you have the time, click back on the test page we have been working on and look specifically at the ‘olay’ area (the text on top of a background mask) H1 text, ‘Lorem ipsum dolor’. On the finished website, I’d like this line to say 'Clear Direction Hypnotherapy.co.uk' which works okay on larger screens but because of the length of this line when compared to ‘Lorem ipsum dolor’ and when viewed on mobile, it displaces my round image pushing it way down below. If I leave off the .co.uk it just fits okay, but I really want the .co.uk to be included. I tried altering the font to a smaller size but it just looks bad. As I see it, my options are that I can either shorten this line to say something else instead like ‘Online Hypnosis Services’ which wouldn’t be my first choice, or to change this text to a logo of some design or other instead which then occupies less horizontal space while saying the same thing. If I were to go for a logo, always assuming I can find a way to create something that looks half decent, how would I include this in the HTML and CSS so it occupies the same horizontal and vertical position aligned with the text below and works okay on mobile and desktop and co-exists with the round image to the right? I’m not sure whether I’ve explained this very well, but I’m sure you’ll get the general gist. If you do see this post, please drop me a quick reply when you can. I’m offline again now until this evening but would appreciate your input as you know all about how this part of my site works having created much of its coding.
I assume this is the demo site:
https://www.cleardirectionhypnotherapy.co.uk/index-2.html
If you want the full text you mentioned then I would reduce the margin on the floated element and reduce the text size in a suitable media query for smaller screens (at the point it overlaps) and you will get a display on an iphone that looks like this.
That looks fine to me and I just removed the left and bottom margins and incresesd the negative margin. I also bumped the text size down until it fits.
Alternatively you could remove the float from the right image and place it in the middle with margin:auto and then perhaps also centre the text. That would look like this:
That allows the text to be larger if you wanted.
These are really design issues so you make your choices and go with what suits best.
The changes are minimal so I’ll let you try to figure those out for yourself first 
Thanks to all who have contributed to answering my question and for moving my latest question to the appropriate section of the forum. Paul, thanks for suggesting how I can solve the problem. I’ll go and experiment with this and will post back again to this thread to let you know how I get on. All the best