place freely looks different on chrome than safari

[alasdair17]

hey @arminunruh

I've almost finished a new site and the client has a page to display her sketchbook ideas and we're using the place freely option. It's working great on chrome but on safari the images overlap the rows. It's not a huge issue and still works with the whole sketchbook idea but would prefer that the images stayed within their row.

Interestingly, in the gridder on chrome it looks how it looks on safari. On the live site on chrome it looks how it should with everything in their own coloured row.

When making the page I've had to place some of the images off their row for it to work as if I place them within their row in the gridder it goes a bit all over the place.

I understand the place freely feature could be a bit difficult for browsers to understand because it's not using a typical grid and is more free form.

No worries if it can't be fixed but thought it was worth pointing out.

Link here: https://heatherridleymoran.com/workbook/

Cheers!

[arminunruh]

hey if u want to keep elements stuck to their row,
can you please place elements using the horizontal grid option?
https://laytheme.com/documentation/horizontal-grid.html

that works better for things like this
with horizontal grid your elements can still overlap one another

so, you'd need to enable horizontal grid,
then right click a place freely image,
then place it within a row

[arminunruh]

and this is not about safari or chrome.
i think its about the aspect ratio of the browser that youre currently viewing the website on (i could be wrong)

but watch how the placements change if you change the width of your browser

[alasdair17]

@arminunruh ah okay, yeah i did see the layout changes when i resize the window. It does still seem quite different on safari though even with similar width.

I've tried the horizontal grid.

Gridder - this is the last row:

Chrome - it goes far beyond the last purple row and uses the global background colour:

Safari - lands on the purple row but images are pushed up:

Like i said no biggie if this can't be fixed as still looks fine when the images overlap two colours.

[arminunruh]

Can you please send:

• a link to this forum topic
• your website address
• /wp-admin/ username and password
  to: info@laytheme.com

i would duplicate the page and then try myself if thats ok!

[alasdair17]

@arminunruh thank you, just emailed you there.

[arminunruh]

i disabled place freely for all elments here and placed them using horizontal grid:
https://heatherridleymoran.com/workbook-copy/

so you have activated the horizontal grid.
but you were still using place freely.
you need to disable place freely for the elements by right clicking them and clicking the place freely button to toggle it off:

only then they will use the horizontal grid way of being placed in the layout.

whenever you enable place freely for an element there is this notice at the bottom:

it says it doesnt work well with browser height rows.

[arminunruh]

if u want to have an image aligned to the bottom of a row, its better to select and then use this button

this way we can place some elements at the bottom of the row for the last row:

and they wont overflow and create white space underneath the purple row

[arminunruh]

you can also align an element to the bottom of a row by using the align bottom button:

and then right click the element and use spaceX offset and spaceY offset

this will make an element stick to the bottom edge of a row better.
just in case you run into issues with that

[alasdair17]

@arminunruh thanks armin that's great! It is working a lot better, I'll work more on it on Monday and let you know if I run into any issues. Have a nice weekend, thanks again!