Streaming live at 10am (PST)

Centering two images side by side on tablet and mobile


#1

Hi

I've got two square photos of two mortgage brokers which stack vertically on desktop which is what I want. However on tablet and mobile, I want the photos to sit side by side in the center.

I have two seperate issues:

1 - On tablet and mob landscape, the images are side by side but I can't figure out how to get them centered. I've played around with floats, inline block, setting width and using auto centering etc but I'm only a hobbyist designer so am probably missing something.

2 - On mobile portrait, the images aren't showing at all.

Here's my shareable read-only link.

https://webflow.com/design/mortgagebrokerglasgow?preview=b77e02461764e4a87823833ad1f3bf0a

Any help would be much appreciated.

Thanks

Graham


#2

First nest the broker images in a div, giv it a class name, set it to inline block. Centered.
Select each of the pics and on the settings tab set them to appear for mobile.
Adjust all margins for breakpoints.

See all that in a video:

http://vincent.polenordstudio.fr/snap//screencast_2015-01-29_09-52-27_0_edited.mp4

#3

Hi Vincent

Many thanks, that's a big help. Fyi, 'm just seeing a black screen for the video, nothing happens when I click play

I'll follow your text instructions and let you know how I get on.

Thanks a lot

Graham


#4

Hey Graham,

just follow the link above, right click on the black screen for the video and select "save as".
Then download the video and start it directly from your desktop.

Then you should be able to watch all of the content.

Cheers
Daniel


#5

Thanks Daniel. Yes, it seems there's a trouble to see this screencast online, I don't know why, it usually goes pretty well... Download and watch.... anyway I've said everything I do in the video in the three lines of my first answer.


#6

Hi Vincent, Daniel,

Many thanks, I downloaded the video and got it all sorted now! Thanks very much Vincent for going to so much trouble, it's really appreciated.

Cheers...Graham


#7

Hi again

I wonder if I could trouble you quickly one more time please.

The photos are all sorted. What I also want to do is put a caption of the person's name under each photo. On desktop I have the photos stacked vertically and on everything else horizontally. I'm not quite sure how to do this without messing up the layout again. Should I put two text blocks in another div inside the div that contains the photos?

Many thanks

Graham


#8

drag a div close to each of the pics, give it a class name (same name) and put the pics inside. Add a text in the div after each photo, and set the positionning for it to go underneath the pic, come back if you have trouble doing this.

For all these concerns, the answer is to nest your thing in another div, so you don't mess with existing properties. In HTML CSS world, it's more than OK to nest a lot. An image in a div in a div in a div in a container in an article in a section is totally appropriate. Something that was true before when we were struggling with browser compatibilities was to not declare too much properties on one element, especially margins and padding. It's less required now but i always nest a lot. For example I rarely put positionning anything on images themselves, ony on their containers.

Nest a lot!


#9

Hi Vincent

Thanks again for all your help. I'll be sure to Nest!

So just to be clear are you saying to put a text block inside a new div inside the div that contains the photos? Or just inside the div that contains the photos? The latter is what I was trying but it seemed to mess with the photo layout.

Also I'm unsure how to set the text beneath each photo, is it with the clear property?

Thanks

Graham


#10

Tried to do a video again and it failed on me... :/

Check this http://vincent.polenordstudio.fr/snap//Webflow_-_MortgageBrokerGlasgow_2015-01-29_16-15-56.jpg

I had to pass the div container to 150px, width of images, so it still works for devices.

Will come post my 3mn video if it ever uploads...


#11

Thats's done the trick. Thank you very much for all your help today Vincent.

Cheers...Graham


#12