Need to correct box presentation order on smallscreens

[ECG, CRL]

Dear Tom.
We updated recently our site and everything seems ok when we open it in our desktop but not when we open it in our smartphone.
The problem is within the homepage. We put some images representing our services. Bellow those images are text boxes giving some information about each image above.
When we access the homepage from our smartphones it happens that the presentation is line by line (what is, in fact, understandable).
Is it possible to put some CSS code to force the presentation in smartphone to be like image box->text box and so on or should we change something else?
The address of our site is http://www.ecgcoop.org.
Thanks.
Manuel Moura

GeneratePress 1.3.46

GP Premium 1.2.96

[Leo]

Hi Manuel,

Don’t think that problem is causing by the rencent update.

Are those images inserted by a plugin?

You can try using Tom’s Lightweight Grid Columns plugin:
https://en-ca.wordpress.org/plugins/lightweight-grid-columns/

If those are widgets then you can use this with it as well:
https://en-ca.wordpress.org/plugins/widget-shortcode/

Let me know if this helps.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ECG, CRL]

Thanks, Leo.
I already correct the images title issue.
We just need to put the size of the images smaller when watching the page in a smartphone. Is it possible to have some css code for that?
Kind regards,
Manuel Moura

[Leo]

Try some CSS like this:

@media (max-width: 768px) {
    .sow-image-container {
        max-width: 150px;
        margin: auto;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts