• Resolved EH

    (@ehabermas)


    When I right-align an image (specifically a 150 px book cover… so not a large image), then preview on mobile, the image caption breaks in such a way that every single letter of the caption is on the next line. So if there are 25 characters in the caption, it takes scrolling down 25 lines to display the entire caption. Any CSS or HTML hacks would be appreciated. Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Branko

    (@brankoconjic)

    Hey @ehabermas,

    It looks like this is a theme issue.

    I will include the fix in the next theme update, in the meanwhile you can paste the following CSS code into the “Additional CSS” field in the Customizer:

    @media screen and (max-width: 768px) {
        .si-entry .wp-block-image figure.alignleft figcaption, 
        .si-entry .wp-block-image figure.alignright figcaption {
            display: block;
        }
    }

    Let me know if that works for you.

    Thanks!

    Thread Starter EH

    (@ehabermas)

    That worked! Thank you!

    One other question for you. Is there a modification you could make to the update above to make the caption only run the width of the image?

    For instance, even though my stacking problem is now gone, when I size to mobile, the width of the caption extends well to the right and well to the left of the image. Ideas on containing it?

    Branko

    (@brankoconjic)

    Try this instead:

    @media screen and (max-width: 768px) {
        .si-entry .wp-block-image figure.alignleft, 
        .si-entry .wp-block-image figure.alignright {
            display: table !important;
        }
    }
    Thread Starter EH

    (@ehabermas)

    Worked beautifully! Thank you so much for your time and effort!

    Branko

    (@brankoconjic)

    Awesome!

    If you have a minute of your time, please leave your review of Sinatra theme here:
    https://wordpress.org/support/theme/sinatra/reviews/

    Thank you!

    Thread Starter EH

    (@ehabermas)

    Done! Thanks again!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Image caption text wrapping issue on mobile’ is closed to new replies.