hi

I'm looking to add spacing between the grid images when in the mobile layout. By default the images display one on top of the other in a vertical column, with no spacing between them. Can you tell me which css sheet I should be editing in order to add some space between the images?

thanks

st

Hi

Do you have a link for the site?

Cheers
Paul

hi paul

client1.andersondesign.co.uk/

Currently, on the mobile, the images are full screen width and stacked directly one above the other. Ideally I would like to have a spacing of approx 40px between each image, and also if possible to reduce the image size so that it occupies about 50% of the screen width when centred horizontally.

Hi

Positioning the elements 40px is a little tricky given the text animation effect coming from the bottom so try

@media (max-width: 787px) and (min-width: 320px) {
#zentools104 li {margin-top:40px;}
#zentools104 li:first-child {margin-top:0;}
#banner {background: #000 !important;}
}

Note the background colour change which will affect images at the widths above that were previously on white background

With the orientation what happens to the images after the 50% has been applied?

Cheers
Paul

hi Paul

thanks - as usual, this solution works great.

st

Not sure what you mean here.

To clarify; I am looking to be able to centre the image (both in landscape and portrait orientation) and for the centred image to occupy approximately 50% of the screen width (in either orientation), so that there is quite a wide border around the image on both sides.

I've attached an mage to illustrate the effect I'm after.

st

I think this is possible but not sure what css to target via media queries I'm afraid

I'll see if anybody else has any suggestions

Cheers
Paul

thanks for you efforts, Paul - appreciated.

Sorry I couldn't manage it

Good luck with the site

I'll try and come back to this if I get chance

Cheers
Paul

no worries, Paul - thanks for trying anyway

You're welcome

Cheers
Paul