CSS image caption don’t work

  • oitavaesfera

    (@oitavaesfera)


    7 years, 2 months ago

    Hi,

    I’ve this post made before the Gutenberg editor

    https://portaviii.barcelos.info/2018/04/10/umas-mais-mounts/

    And the image caption is okay. All fine with the CSS

    But with the new editor I can’t get the same effect.

    The older CSS

    div .wp-caption { 
		position: relative;	
	  border: 0px solid #fff;
	  margin:10px 10px 10px 10;
}

.wp-caption.alignright {
	margin:10px 0 10px 15px;
}

.wp-caption-text{
			background-color: rgba(0, 0, 0, 0.8); 
			bottom: 15px; 
			color: #eee; 
			left:0; 
			padding: 3px 10px 3px 20px;
			position: absolute;
			font-style: normal;
	    font-family: "Roboto", arial, sans-serif !important;
    	}

    Thanks in adavnce for the help.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • luckychingi

    (@luckychingi)

    7 years, 2 months ago

    On https://portaviii.barcelos.info/2018/04/10/umas-mais-mounts/ The caption is enclosed in a <p> tag:
    <p class="wp-caption-text">grand armored wyvern</p>

    On https://portaviii.barcelos.info/tag/claire-north/ its enclosed in <figcaption>

    Try adding this to custom CSS:

    .wp-block-image {
    position: relative;
}
figcaption{
    background-color: rgba(0, 0, 0, 0.8);
    color: #eee;
    left: 0px;
    bottom: 0px;
    padding: 3px 10px 3px 20px;
    display: inline-block;
    position: absolute;
    font-style: normal;
    font-family: "Roboto", arial, sans-serif !important;
    margin: 10px 10px 10px 10;
}
    Thread Starter oitavaesfera

    (@oitavaesfera)

    7 years, 2 months ago

    Solved. Thanks a lot.

    Thread Starter oitavaesfera

    (@oitavaesfera)

    7 years, 2 months ago

    Hi,

    @luckychingi do you know why the font color of the caption isn’t white?

    If I change color: #eee; to color: #fff; nothing happens.

    Thanks in advance.

    • This reply was modified 7 years, 2 months ago by oitavaesfera.
    luckychingi

    (@luckychingi)

    7 years, 2 months ago

    use this for chaging font color

    .wp-block-image figcaption{
color:#fff;
}
    Thread Starter oitavaesfera

    (@oitavaesfera)

    7 years, 2 months ago

    Fantastic!!!

    Thanks a lot.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS image caption don’t work’ is closed to new replies.