Support only during business hours : Monday to friday, from 8:30 am – 5:30 pm CEST

Due to the decrease in our staff due to vacations, our response time may be longer.

Be sure we're doing our best to manage your topic as soon as possible.

CSS to place captions underneath images

This topic is resolved
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • Paul
    Participant
    • 2 Topics
    • 8 Posts
    @boogieboa

    Hi there,

    The way the theme displays image captions obscures the image on many occasions. As you can see from the attached examples, it would be better to display captions under images rather than on top of them.

    Is it possible to provide a CSS snippet that will place captions below images and not to cover all or part of an image with its caption?

    Additionally, how do we change the image caption settings such as colour, font, etc?

    Many thanks.

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6603 Posts
    @themodactyl

    Hi Paul,

    To change this, simply add the following code snippet to your website:

    /**
    * Place caption under image
    */
    @media (min-width: 768px){
    	.wp-block-image figcaption{
    		position:relative;
    		display:block !important;
    		min-width:100%;
    		background-color:inherit;
    		color:inherit;
    		box-shadow:none;
    		padding-left:0px;
    		font-size:0.8em;
    	}
    }

    To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.
    Pasting your code snippet there should do the trick for you.

    Also, it’s important to remember that we share snippet only to solve issues with our theme. Any further request for CSS snippets will have to be part of a defect that needs to be fixed urgently. No snippets will be shared otherwise.

    If you want to go further with the customization of your website, we advise that you require customization work.

    Regards,

    Paul
    Participant
    • 2 Topics
    • 8 Posts
    @boogieboa

    Thanks for this. It’s an improvement, but the narrow width, which means the caption breaks across two lines even under large images. So how do we get the caption to behave like a paragraph, sketching across the full length of the image and breaking into two or more lines only if necessary? It would be great to use a slightly smaller font for the caption, too.

    By the way, why do I never receive notifications of replies via email when it’s always ticked?

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6603 Posts
    @themodactyl

    Hi Paul,

    I updated the snippet in my previous reply. 🙂

    Can you make sure that you have subscribed to this article? Please find the attached screenshot. It should be automatic, but maybe you unsubscribed from this topic by mistake? In case you already subscribed to this topic but don’t receive any email, can you please check your spam?

    Best,

    Paul
    Participant
    • 2 Topics
    • 8 Posts
    @boogieboa

    Again, thank you for the updated CSS snippet, which has done the job perfectly.

    I have never received any email notification on your support forum, which means I come here to check after a reasonable period. I deleted my first account because I thought it had something to do with signing in with Envato. However, signing in with an email and password has made no difference in this respect. Of course, I checked my spam folder before any of the above.

    Cheers.

    Paul
    Participant
    • 2 Topics
    • 8 Posts
    @boogieboa

    Hi there,

    Sorry to bother you with this again. I’m experiencing a recurring issue with captions. The caption on a first image usually appears fine, as in image 1 below, but subsequent captions are gathered under the image in a column-like display (image 2).

    Any suggestions?

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6603 Posts
    @themodactyl

    Hi Paul,

    We’re sorry to read that, it is very disturbing. 🤔 Can you please make sure to subscribe manually to this topic as explained in my previous reply?

    Concerning the caption, it’s best if we take a quick look at this. Could you create a new website user for us please? If possible with administrator capabilities. You can post the user name and password in your next reply and mark it as private to keep this between us.

    Thank you.

Roboraptor 🦖
Themosaurus Topic Closer

Hi there,

This topic has been inactive for a while now so we will be closing it to keep the forum tidy. Don't hesitate to create a new topic if you still need help and we'll be glad to help you!

Best regards,
The Themosaurus team.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘CSS to place captions underneath images’ is closed to new replies.

Troubleshooting Demo Imports

You're trying to setup your theme but you're experiencing errors when importing the demo content? Or you've just followed the setup guide but your website doesn't look exactly like our demo? These are common issues for which you can find easy and quick fixes.

Happy With our Support So Far?

Feel free to review our theme on Themeforest! It helps us making our products more known to new potential customers, which allow us more time to improve the quality and develop new features. #SharingIsCaring ❤️

Discover MatchPress

Skip • Like • Super-Like

Add powerful matching features like Member likes, skips, super likes, conditional private messaging and much more.

Setup Your Cera or Gwangi powered Community Website and Turn it into an iOS and Android App

15% discount for Cera users

To unleash the full power of your Cera or Gwangi theme, we have partnered with the Zipline team. Your community website can now be fully setup and turned into your very own custom app for iOS and Android.

Whether you've newly acquired the theme or already got your site up and running, Zipline got you covered. And we got you an incredible discount.

Holiday, Weather & Festive effects
to pimp your WordPress Site