Preformatted text clashing with featured image

  • harrisonjohnstone · Member ·

    I’m having an issue with the preformatted text merging/covering up the featured image on my site.

    As you can see, on this page it’s fine.

    But, on this page, the preformatted text box and the featured image merge.

    WordPress have said that:

    “Portrait images are displayed aligned to the right within the text. There isn’t a way to force or change that in the theme, so to avoid it, the only way forward would be to use landscape Featured Images only.”

    Is there a way to stop preformatted text merging with portrait featured images? Or, if not, a way to force portrait images above text?

    Cheers!

    The blog I need help with is: (visible only to logged in users)

  • justjennifer · Member ·

    Hi there, it looks like you are using a Premium theme, Huntt, on your website.

    Have you consulted with the theme author at the special premium theme forum? https://premium-themes.forums.wordpress.com/forum/huntt You do need to be logged in with the username account that purchased the theme or upgrade in order to post in that forum.

    Also just letting you know that if you have a WordPressdotcom upgrade plan, you are also eligible for direct support from staff by live chat or email when you post via the contact form at https://wordpress.com/help/contact

  • kokkieh · Staff ·

    Hi there,

    The problem here is that your theme wraps the featured image inside the first text element that appears on the page. Usually that would be a paragraph which doesn’t use specific styling. However the pre-tag is always styled differently from regular text, in your theme specifically with a border and a grey background, and because the image is wrapped in the first text element, in this case the pre-element, it is included inside the border.

    This is not a bug, but rather that you are using the pre-element in a way it was not designed to be used and which is incompatible with your theme.

    However, I can offer an alternative. Instead of using preformatted text, use a blockquote. Then you can use some inline CSS to change the font size, given that your theme displays blockquotes at a much bigger font size than regular text.

    Add your byline using the blockquote icons in the editor, and then switch to HTML mode. Edit the opening blockquote tag to specify a font size:

    <blockquote style="font-size: 18px;">

    You can adjust the font-size value to change the size of the text, but inline CSS like this is limited in what you can change, so there’s no way to make it look exactly like preformatted text.

    You might be able to do more with custom CSS, but you’ll need the Premium Plan for that.

  • harrisonjohnstone · Member ·

    Thanks so much for your very detailed response.

    That’s a pretty complicated way to have text not wrapped with an image, especially as this is something we’d do to most articles.

    Will contact the theme author as this isn’t really a feasible solution.

    Appreciate your response very much @kokkieh!

  • kokkieh · Staff ·

    As I said, you’re using preformatted text in a way it wasn’t designed to be used, so the theme author might not consider this something to be fixed. I just want to make sure you realise that – how we want to use something and how it was designed to be used is not always the same, and that doesn’t necessarily mean there’s anything wrong with the design :)

  • harrisonjohnstone · Member ·

    I understand there isn’t necessarily a problem with the theme, I’m just annoyed at the limited options I have to provide my contributors with a byline that is differentiated from the body text without the need to custom code 80 articles a year.

    If I could code myself, I wouldn’t be paying for the theme or WP.

  • The topic ‘Preformatted text clashing with featured image’ is closed to new replies.