Problems with Comic display in Firefox

  • Resolved moremixtapes

    (@moremixtapes)


    9 years, 4 months ago

    I’m having one small issue with finalizing my webcomic’s site: https://dogbirdcomic.com/

    I’d like to have the comic’s title appearing first, rather than below the image, which is the Panel theme’s default. When I couldn’t find an obvious way to customize and make that change, I tried adding a content-comic.php file to my child theme that just switched two lines of code, like so:

    <article id="jetpack-comic-<?php the_id(); ?>" <?php post_class(); ?>>
	<?php the_title( '<h1 class="comic-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' ); ?>
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'panel-comic-strip' ); ?></a>

    That seemed to do the trick. Except in Firefox. Now when you load the site in Firefox, the title pushes the comic off center. Is there a better way for me to flip those two elements, or is there just another adjustment that I need to make so that the comic will stay centered and below the title across all browsers?

    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Kathryn Presner

    (@zoonini)

    You’re on the right track!

    I think this is happening because there’s a clear on the .comic-title class here:

    .comic-title {
    clear: left;
    float: left;
    width: 65%;
}

    But now that the comic title is not below the comic image, you’ll need to clear the float via another selector. Could you try adding this to your child theme’s stylesheet?

    .attachment-panel-comic-strip {
    clear: left;
}
    Thread Starter moremixtapes

    (@moremixtapes)

    Perfect, looks like that did the trick! Comic looks correct in all the browsers I can test it on. Thanks!

    Moderator Kathryn Presner

    (@zoonini)

    Excellent, glad that did it! I’ll mark this thread as resolved.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problems with Comic display in Firefox’ is closed to new replies.