3 images on home page display change for mobile devices

Hi, following a conversation with @michelle Shull in chat today,

the current issue is with the display of three images displayed on the home page.

I would like them when displayed on desktop web browsers to display sidebyside. + scale to fit depending on the screen size (scale down or up with no overlaps or gaps)

When in tablet or mobile phone to display one ontop of the other due to the smaller screen size.

It’s going to be a little tricky, that section is part of a table, not a div, so we may need to do a little working around here

Site: http://tinyurl.com/kl7grg3

support access open

Thanks

Tom

  • Michelle Shull
    • DEV MAN’s Apprentice

    Heya, Tom!

    First off, this CSS should cover your Appointments store page to change the font size of the legend text:

    table.appointments-legend-table {

    font-size: 1.2rem;

    }

    Again, replace your font size for 1.2rem there. :slight_smile:

    As for your images, this is what I did for you here:

    1. I wrapped your table in a unique class.

    2. I added a second block of images to show only on mobile that aren’t in a table, and gave it a unique class name.

    3. I added the following to your custom CSS:

    @media screen and (max-width: 760px) {
    table.spinimagerowtable{
    display: none;
    }
    .mobilespinimagerow {
    display: block;
    }

    .mobilespinimagerow img {
    width: 100%;
    }
    }

    @media screen and (min-width: 761px) {
    table.spinimagerowtable{
    display: table;
    }
    .mobilespinimagerow {
    display: none;
    }
    }

    This looks great for me on my devices, let me know what you think!

    Thanks for swinging by chat today!

  • Tom
    • Code Wrangler

    Hi Michelle,

    Thanks for the code, that works well and looks nice.

    There is one issue though when viewing on mobile devices you see 6 images the three horizontal and the the vertical ones, is it possible to hide the horizontal ones from there – tried looking at the text code to apply something like this – https://premium.wpmudev.org/forums/topic/editing-home-page-while-keeping-images-hidden-from-desktop-web-browsers#post-867132 but it is displayed differntly.

    would i still use the nth-child()

    in this case nth-child(11) / nth-child(13) / nth-child(14) ?

    Thanks

    Tom

  • Bojan Radonic
    • Head of Support

    Hey there @tom,

    I’ve checked your site and I’m not being able to see 6 images on smaller resolutions, maybe this is just a caching issue? Could you please try clearing cache before checking for changes.

    As for using nth-child there is no need for that here since Michelle added specific classes for each group of images and those classes are being used to display/remove them on different resolutions.

    Hope this makes sense :slight_smile:

    Cheers,

    Bojan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.