Archived topic
Wrap text round header image or feature image
12 replies · Started by Tony on January 29, 2016
Is it possible for text to be beside (wrapped) around a header image or feature image.
Googling indictes it's a common request.
Also can the image be aligned left/right./centre?
Hi there,
Give this a shot: https://generatepress.com/forums/topic/customising-featured-image/#post-83209
To align it you can try this:
.page-header-image-single {
text-align: center;
}
You can replace center with either left or right.
This works (below) but the text is touching the featured image. If you apply a style other than paragraph and insert some spaces then it creates a gap and looks OK. Spaces in paragraph style are ignored but if they are inside tags they work. gets stripped out by the visual editor as do <P></P>
WP is like the wild west!
.page-header-image-single {
float: left;
}
-------------------
Why does the edit option disappear on posts? Would be nice if it stayed on for the contributor.
Aha - if I do this I get a gap on the left of the image so don't need the spacing.
.page-header-image-single {
float: left;
margin: 0px 20px 0px 0px;
}
The image is very close to the author's name but I can't force a gap above the image with this.
Hi Tony,
Try this CSS:
.page-header-image-single {
float:left;
margin: 20px 20px 0px 0px;
}
I had already tried various combinations and none of them moves the image down even if set to 100px.
Can you link me to the page?
Here it is - what's the best way to enter a url?
When I just pasted it in and submitted it there was nothing there.
Like this:
http://loveitphotography.uk/uncategorized/gallery-test/
Here I've wrapped it in 'code' tag
http://loveitphotography.uk/uncategorized/gallery-test/
The margin is set as 100px 20px 0px 0px
I have tried other combinations but never get space at top
Hi Tony,
Sorry for not getting back to you sooner - we had a baby today so things have been quite hectic.
I'm on An iPad so I can't currently check the code very easily, but I'll leave this unread so I can take a look as soon as I get back to my desktop.
Hi Tony,
Try this instead:
.page-header-image-single {
float: left;
margin: 30px 20px 0px 0px !important;
}
That works - thanks 'Dad'
Can't wait to hear that for the first time! :)
