How to change the presentation page columns

OK, now I’ve managed to get my manually defined content columns to be visible (by supplying images for them), I think we have an issue for our website regarding the display behavior of these columns.

Currently, at desktop screen size, all you see once you’ve scrolled down to the columns area is the images alone until you move the mouse over an image, at which point the image is de-emphasized (darkened/defocused) and the text appears on top of where the image was. When the columns are displayed at cell phone screen size, the image is separated from the text, and the text is displayed below the image.

Here’s why we believe we have an issue. Our website is for a church, and our website users (mostly the congregants) are in large part older, and are not at all sophisticated or knowledgeable about the web. We believe that our users will just look at the images and not realize that there is text to see, and so won’t think to move the mouse over those images. And it is the text (content) that they (and we) find important.

(We also believe we have that problem when they first view the slider at the top of the desktop (and tablet) screen, and that our users will not realize that there is more to view below, and not realize they need to scroll down. That is a somewhat different problem, and we will have to figure out how to provide visual indicators and navigational assistance so that they know there is more below and figure out how to get to it. If you have any experience of how to solve this problem, we’d be very interested in hearing your suggestions.)

In other responsive websites, it is common to have columns of content, with an image at the top and content (text and other things) presented below it, on the desktop screen screen. We would like to do that in our website, too. So, how do we cause the current behavior to change so that columns display on desktop screens the same way they do on cell phone screens (except multiple columns per row)? Is it as simple as making CSS changes? Or should I say complex CSS changes? I don’t see any theme configuration to change this behavior.

Any comments/suggestions/advice would be greatly appreciated…

Thanks!

Website: responsive.uucm.org