The category modules--when viewed on the phone--display in a column of two. However, since the modules are small than the ad modules, the modules are aligned left in two columns.

Is there a way to make the modules smaller so that they appear in a three-column module that fills a phone screen
OR
Is there a way to force text categories on just phones with the "@media" css code or something in the responsive css file?


See my attached screenshot.

correct the responsive.css. It's easy) Look at the desired line in the inspector of any modern browser

@jasongeek
In this case width of boxes are static. You can try something like this:
@media screen and (max-width: 767px) {
#home-cats a {
    width: calc(33.33% - 10px);
    margin: 0 5px 10px 5px;
}
}


Thank you. I'll add this to the css.

No, let us know about results

That works perfectly. The 33.33% works just right. It makes three columns now.

Would it also be possible (as an option) to make the category blocks:

1. a single column of rectangles
2. and just large text with no image

Try this:
#home-cats .wrap { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; overflow-x: auto; }
#home-cats a {min-width:100px;}