Gallery Caption workarounds for 7.1? ROUND TWO

I tucked the Code Bock beneath a section of copy. This works fine in the desktop view, but on mobile the box creates a gap. Is there anyway to force the Code Block to be smaller?

Without Code Block.

With Code Block.

*Edit: I can get rid of the gap converting the code to Markdown:

.gallery-item-description { display: none !important; }

The gap disappears because the code is shorter. But the code flashes for a brief second on page redraw.

Weird.

*Update: The code used the Paragraph Medium color in the palette. If I change that to the background color, the code/flash disappears.

On 10/17/2022 at 10:00 PM, CooperWhite said:

I tucked the Code Bock beneath a section of copy. This works fine in the desktop view, but on mobile the box creates a gap. Is there anyway to force the Code Block to be smaller?

Without Code Block.

With Code Block.

*Edit: I can get rid of the gap converting the code to Markdown:

.gallery-item-description { display: none !important; }

The gap disappears because the code is shorter. But the code flashes for a brief second on page redraw.

Weird.

*Update: The code used the Paragraph Medium color in the palette. If I change that to the background color, the code/flash disappears.

Did you solve or still need help? If need help, can you share link to page in screenshot?

Thanks for checking up.

I finally did solve the problem of the code flashing by changing it's color by adjusting the Paragraph Medium choice in the color palette I'm using for the background. This makes the code the same as the background color.

The gap issue cause by the code was solved by making the code all one line instead of stacked. Markdown did not work though. The <style> tags were needed.