[Resolved] Can’t Center Captions Under Images

[tbgr]

Hi. All of the captions under my images are left aligned. How do I center them?

You can see an example here: https://golfsatire.com/2022/06/12/angry-liv-golf-player/

I tried using this CSS but it didn’t work:

.wp-block-image figcaption {
text-align: center;
}

Thank you.

[Leo]

Hi there,

The site is under Maintenance Mode so I can’t see the issue live.

Can you disable it?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[tbgr]

try it again.

[Leo]

Try this instead:

.wp-caption .wp-caption-text {
    text-align: center;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[tbgr]

Sorry, Leo, that didn’t work.

If you have another idea, send it over. If not, no big deal — it’s not that important.

Thank you.

[Fernando]

Hello there,

You have PHP code in your Additional CSS. There should be no other code than CSS in Additional CSS. This would cause issues.

Also I believe you have syntax errors which causes issues too. You can try checking for syntax errors here: http://csslint.net/

[tbgr]

Hello.

What is the additional PHP Code in my Additional CSS? Do I just highlight it and delete it?

Also, I’m getting the following warning on my WordPress Dashboard: “Your site is running an insecure version of PHP (7.3.33), which should be updated.”

How do I update the PHP?

Thank you.

[tbgr]

I used CSS Lint and got the following report below. Frankly, this is beyond my level of understanding. If you could point me in the right direction for using this information I’d be grateful. Thank you.

CSS LINT
Will hurt your feelings*

(And help you code better)

CSS lint found 34 errors and 9 warnings. How can you fix it? See the details below.

RESTART
About Contribute Source Node/Rhino CLI Documentation
Search:
line column title description browser
error 15 1 Parsing Errors Unexpected token ‘add_filter(‘ at line 15, col 1.
add_filter( ‘generate_editor_styles’, function( $editor_styles ) {
All
error 15 13 Parsing Errors Unexpected token ”generate_editor_styles” at line 15, col 13.
add_filter( ‘generate_editor_styles’, function( $editor_styles ) {
All
error 15 37 Parsing Errors Unexpected token ‘,’ at line 15, col 37.
add_filter( ‘generate_editor_styles’, function( $editor_styles ) {
All
error 15 39 Parsing Errors Unexpected token ‘function(‘ at line 15, col 39.
add_filter( ‘generate_editor_styles’, function( $editor_styles ) {
All
error 15 49 Parsing Errors Unexpected token ‘$’ at line 15, col 49.
add_filter( ‘generate_editor_styles’, function( $editor_styles ) {
All
error 15 64 Parsing Errors Expected LBRACE at line 15, col 64.
add_filter( ‘generate_editor_styles’, function( $editor_styles ) {
All
error 15 64 Parsing Errors Unexpected token ‘)’ at line 15, col 64.
add_filter( ‘generate_editor_styles’, function( $editor_styles ) {
All
error 15 66 Parsing Errors Unexpected token ‘{‘ at line 15, col 66.
add_filter( ‘generate_editor_styles’, function( $editor_styles ) {
All
error 16 8 Parsing Errors Expected LBRACE at line 16, col 8.
if ( class_exists( ‘Classic_Editor’ ) ) {
All
error 16 8 Parsing Errors Unexpected token ‘(‘ at line 16, col 8.
if ( class_exists( ‘Classic_Editor’ ) ) {
All
error 16 10 Parsing Errors Unexpected token ‘class_exists(‘ at line 16, col 10.
if ( class_exists( ‘Classic_Editor’ ) ) {
All
error 16 24 Parsing Errors Unexpected token ”Classic_Editor” at line 16, col 24.
if ( class_exists( ‘Classic_Editor’ ) ) {
All
error 16 41 Parsing Errors Unexpected token ‘)’ at line 16, col 41.
if ( class_exists( ‘Classic_Editor’ ) ) {
All
error 16 43 Parsing Errors Unexpected token ‘)’ at line 16, col 43.
if ( class_exists( ‘Classic_Editor’ ) ) {
All
error 16 45 Parsing Errors Unexpected token ‘{‘ at line 16, col 45.
if ( class_exists( ‘Classic_Editor’ ) ) {
All
error 17 9 Parsing Errors Unexpected token ‘$’ at line 17, col 9.
$editor_styles = array( ‘assets/css/admin/editor-style.css’ );
All
error 17 24 Parsing Errors Expected LBRACE at line 17, col 24.
$editor_styles = array( ‘assets/css/admin/editor-style.css’ );
All
error 17 24 Parsing Errors Unexpected token ‘=’ at line 17, col 24.
$editor_styles = array( ‘assets/css/admin/editor-style.css’ );
All
error 17 26 Parsing Errors Unexpected token ‘array(‘ at line 17, col 26.
$editor_styles = array( ‘assets/css/admin/editor-style.css’ );
All
error 17 33 Parsing Errors Unexpected token ”assets/css/admin/editor-style.css” at line 17, col 33.
$editor_styles = array( ‘assets/css/admin/editor-style.css’ );
All
error 17 69 Parsing Errors Unexpected token ‘)’ at line 17, col 69.
$editor_styles = array( ‘assets/css/admin/editor-style.css’ );
All
error 17 70 Parsing Errors Unexpected token ‘;’ at line 17, col 70.
$editor_styles = array( ‘assets/css/admin/editor-style.css’ );
All
error 18 5 Parsing Errors Unexpected token ‘}’ at line 18, col 5.
}
All
error 20 12 Parsing Errors Expected LBRACE at line 20, col 12.
return $editor_styles;
All
error 20 12 Parsing Errors Unexpected token ‘$’ at line 20, col 12.
return $editor_styles;
All
error 20 26 Parsing Errors Expected LBRACE at line 20, col 26.
return $editor_styles;
All
error 20 26 Parsing Errors Unexpected token ‘;’ at line 20, col 26.
return $editor_styles;
All
error 21 1 Parsing Errors Unexpected token ‘}’ at line 21, col 1.
}, 20 );
All
error 21 2 Parsing Errors Unexpected token ‘,’ at line 21, col 2.
}, 20 );
All
error 21 4 Parsing Errors Unexpected token ’20’ at line 21, col 4.
}, 20 );
All
error 21 7 Parsing Errors Unexpected token ‘)’ at line 21, col 7.
}, 20 );
All
error 21 8 Parsing Errors Unexpected token ‘;’ at line 21, col 8.
}, 20 );
All
error 72 1 Parsing Errors Expected RBRACE at line 72, col 1.
.wp-caption .wp-caption-text {
All
error 76 1 Parsing Errors Unexpected token ‘}’ at line 76, col 1.
} /* End GeneratePress Site CSS */
All
warning 2 1 Disallow IDs in selectors Don’t use IDs in selectors.
.separate-containers #page .site-main {
All
warning 3 5 Disallow !important Use of !important
margin-top: -80px !important;
All
warning 6 10 Disallow adjoining classes Don’t use adjoining classes.
body .site.grid-container {
IE6
warning 12 17 Disallow units for 0 values Values of 0 shouldn’t have units specified.
box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
All
warning 12 21 Disallow units for 0 values Values of 0 shouldn’t have units specified.
box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
All
warning 12 25 Disallow units for 0 values Values of 0 shouldn’t have units specified.
box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
All
warning 31 21 Disallow units for 0 values Values of 0 shouldn’t have units specified.
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
All
warning 31 34 Disallow units for 0 values Values of 0 shouldn’t have units specified.
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
All
warning 65 1 Disallow overqualified elements Element (h2.entry-title) is overqualified, just use .entry-title without element name.
h2.entry-title {
All

76 lines 34 errors 9 warnings
1 /* GeneratePress Site CSS */ /* Main container styles */
2 .separate-containers #page .site-main {
3 margin-top: -80px !important;
4 }
5 @media (max-width: 768px) {
6 body .site.grid-container {
7 margin-left: 30px;
8 margin-right: 30px;
9 }
10 }
11 .site-content .inside-article, .sidebar .widget, .comments-area {
12 box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
13 }
14
15 add_filter( ‘generate_editor_styles’, function( $editor_styles ) {
16 if ( class_exists( ‘Classic_Editor’ ) ) {
17 $editor_styles = array( ‘assets/css/admin/editor-style.css’ );
18 }
19
20 return $editor_styles;
21 }, 20 );
22
23 /* Posts grid styles */
24 @media (min-width: 769px) {
25 .generate-columns .inside-article {
26 transition: all 0.2s ease-in;
27 transform: scale(1);
28 }
29 .generate-columns .inside-article:hover {
30 transform: scale(1.01);
31 box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
32 }
33 p.read-more-container {
34 opacity: 0;
35 transition: all 0.3s ease-in-out;
36 }
37 .generate-columns .inside-article:hover p.read-more-container {
38 opacity: 1;
39 }
40 }
41 .generate-columns .inside-article {
42 display: flex;
43 flex-direction: column;
44 border-radius: 3px;
45 }
46 .generate-columns .inside-article .entry-summary {
47 display: flex;
48 flex-direction: column;
49 flex-grow: 1;
50 }
51
52 .read-more-container {
53 margin-top: auto;
54 text-align: center;
55 }
56 button, html input[type=”button”], input[type=”reset”], input[type=”submit”], a.button, a.button:visited {
57 border-width: 1px;
58 border-style: solid;
59 border-color: inherit;
60 border-radius: 3px;
61 }
62 .blog footer.entry-meta, .archive footer.entry-meta {
63 margin-top: 0;
64 }
65 h2.entry-title {
66 text-align: center;
67 }
68 /* Sidebar styles */
69 .sidebar .widget:first-child {
70 background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
71
72 .wp-caption .wp-caption-text {
73 text-align: center;
74 }
75
76 } /* End GeneratePress Site CSS */
Nicholas Nicole

[David]

Hi there,

this is the PHP that you need to delete from your CSS:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    if ( class_exists( 'Classic_Editor' ) ) {
        $editor_styles = array( 'assets/css/admin/editor-style.css' );
    }
	
    return $editor_styles;
}, 20 );

For adding PHP read here:

https://docs.generatepress.com/article/adding-php/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[tbgr]

Ok, I deleted the PHP per your instructions. But that still didn’t center the photo captions. For whatever reason, it doesn’t seem possible to accomplish this. So I’m going to give up on doing this as it’s not that important.

As for updating the PHP, is this something I really need to do? On tech proficiency, on a scale of 1 to 10, I’m a 3. I would hate to install Code Snippets and screw up my website. Thanks for your help.

[tbgr]

Regarding upgrading the PHP … is something Hostgator’s tech department can do for me?

[David]

Go to Customizer > Additional CSS and DELETE ALL the CSS.
Then Paste in this CSS:

/* GeneratePress Site CSS */ /* Main container styles */
.separate-containers #page .site-main {
    margin-top: -80px !important;
}
@media (max-width: 768px) {
    body .site.grid-container {
        margin-left: 30px;
        margin-right: 30px;
    }
}
.site-content .inside-article, .sidebar .widget, .comments-area {
    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
}

/* Posts grid styles */
@media (min-width: 769px) {
    .generate-columns .inside-article {
        transition: all 0.2s ease-in;
        transform: scale(1);
    }
    .generate-columns .inside-article:hover {
        transform: scale(1.01);
        box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
    }
    p.read-more-container {
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }
    .generate-columns .inside-article:hover p.read-more-container {
        opacity: 1;
    }
}
.generate-columns .inside-article {
    display: flex;
    flex-direction: column;
    border-radius: 3px;
}
.generate-columns .inside-article .entry-summary {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.read-more-container {
    margin-top: auto;
    text-align: center;
}
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    border-radius: 3px;
}
.blog footer.entry-meta, .archive footer.entry-meta {
    margin-top: 0;
}
h2.entry-title {
    text-align: center;
}
/* Sidebar styles */
.sidebar .widget:first-child {
    background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
}
.wp-caption .wp-caption-text {
    text-align: center;
}
    
/* End GeneratePress Site CSS */

That should now work.

The PHP snippet, its not required.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[tbgr]

David:

Your instructions worked like a charm. Thank you for your assistance.

I am not worthy! 🙂

[David]

Glad to hear its working 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts