Banner widget: caption not showing on mobile version

Nicely done!
As for the mobile version, it gets hidden on small screens (phones in portrait view), otherwise the text would be too small to read. What were you viewing it in, a phone?

As a side note, your widget title is showing, so you will want to use a plugin like “Remove Widget Titles. I have a tutorial for that HERE

I was viewing the site on an iPhone 6s plus. I guess I will need to put the blog title somewhere else for visibility on mobile.

Geez, I had the ! but didn’t realize I needed the plug in “Remove Widget titles”

If you are comfortable with creating custom CSS for media queries, you can override the theme’s own styling that hides the caption title, or even the box it sits in so that it does show up, but you would need to play with font sizes for the phone viewing.

If interested, I can paste some code here…

Ok, I will try ????

This is the CSS in the theme right now for phones…

@media (max-width: 480px) {
  .gallery .gallery-caption {
    display: none;
  }
}

To show the caption box, change the display:none; to be display: block;

Then you can adjust the caption text font sizes like this:

@media (max-width: 480px) {
.banner-caption {
   width: 90%;
   padding: 10px 10px;
   font-size: 1.5rem;
}
.banner-caption span {
   font-size: 0.75rem;
}
}

The banner-caption is the first caption line of text, while the banner-caption span is the second line of text.

Just change the font sizes and padding to fit your preferences when viewed on a phone.

Use https://www.pxtoem.com to convert rem to px and vice versa. This online converter is for em sizes but rem is very similar. For example:

16px = 1em (or 1rem)