[Resolved] Can’t Center Captions Under Images

Home Forums Support [Resolved] Can’t Center Captions Under Images

Home Forums Support Can’t Center Captions Under Images

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2318660
    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.

    #2319263
    Leo
    Staff
    Customer Support

    Hi there,

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

    Can you disable it?

    Let me know 🙂

    #2319338
    tbgr

    try it again.

    #2319453
    Leo
    Staff
    Customer Support

    Try this instead:

    .wp-caption .wp-caption-text {
        text-align: center;
    }
    #2319483
    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.

    #2319521
    Fernando
    Customer Support

    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/

    #2319890
    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.

    #2319906
    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

    #2319933
    David
    Staff
    Customer Support

    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/

    #2319958
    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.

    #2319959
    tbgr

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

    #2319963
    David
    Staff
    Customer Support

    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.

    #2319974
    tbgr

    David:

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

    I am not worthy! 🙂

    #2320055
    David
    Staff
    Customer Support

    Glad to hear its working 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.