CSS help - Images on Home page Desltop vs mobile

Hi,
I would like to have this page - http://tinyurl.com/lguqz6p
Display the three images currently placed on it side by side, Ideally without the large gaps. when viewed on a Desktop device.

However when viewed on a mobile device i need the images to appear one on top of the other scaled to fit the size of the screen.

In order to view them side by side on the same line i used a table and placed the image into each column. but this is affecting the mobile as well. is there a way around this?

Settings page - http://www.awesomescreenshot.com/image/131635/609cf19997e7b6bfd541dff7d45a5fc2

View from desktop site - http://i61.tinypic.com/2eofhpu.jpg
View - mobile device - http://i62.tinypic.com/2rc296t.png

Support acess is open

Thanks

Tom

  • Aicee Taguilaso
    • WordPress Warrior

    Hi Tom,

    Hope you're well today! :slight_smile:

    I can't see the gap on desktop view. See screenshot - http://prntscr.com/6x8cae

    Try using this CSS code for mobile view:
    @media only screen (max-width: 480px){
    	.entry-content td {
    		display: block;
    		padding-bottom: 20px;
    	}
    }

    Just adjust the values as needed.

    Also, can you try adding a class to your table so it will be specific.
    Something like, "<table class="sp-home-images">
    Then, just replace the selector above from .entry-content td to .entry-content .sp-home-images td

    Let me know if this works for you!

    Regards,
    Aicee

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.