Vertically aligning images at different viewpoints

Support
#1

Hi guys
We are looking for some guidance on a design we are implementing in X. On this home page https://bricklane.ys.com.au
As you scroll down the page we have set up two images where we want the lower right corner of the top image to align with the top left corner of the image below. We want to keep this design through desktop and tablet viewpoints. Then I want to repeat the effect further down. We have used margin less columns to start with but Im unsure this is the right approach as they don’t hold their position through different viewpoints.
Thanks in advance

#2

Hi @philysgdy,

Thank you for writing in, yes you need the marginless column option so your columns lower-right and upper-left will be aligned.

Then follow the same method provided here for keeping the columns stay inline in mobile view.

On our upcoming update, there is a new layout feature that lets you set up if you want to keep your column inline in mobile without a custom CSS, but for now, please keep your layout as simple as possible (no negative margins, and fix width) as that might cause trouble than help.

Cheers!

#3

Thank Friech
Yes I knew the margin less columns were two way to go in rows. I will set that up and get you to critique it, I think that would be best keeping it as simple as possible,
I was using a row of 4 columns followed by a row of 3, I will switch to a constant of 4, see how I go.
thanks

#4

Hi Phil,

Yes that’s right, let us know if this works for you.

Thanks!

#5

Hi guys
we have made a start, which seems to work but I would like your guidance on space between rows and the impact that columns has on this. Have a look at my endeavours so far, I found myself making adjustments to row margins, I don’t know if this is best practice. https://bricklane.ys.com.au/

What is the best way to control the height of the image reveal as I am using padding top in columns, is this a good approach

Also on the text ‘book a table’ I would like to bring that end position to teh right - how do I control that

thanks for your guidance

#6

Hi Phil,

Make that Row a 1/2 + 1/4 + 1/4, there is nothing on the second column on that row anyway.
Then change the Text alignment of that paragraph to right, currently its set to left.

text-align: right;

Then zero out the left and right padding you have on that e1 Content Area.

.e1 {
	padding-right: 0;
    padding-left: 0;
}

Yes, padding-top and bottom should work just fine.

Thanks,

1 Like
#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.