Layout different on Safari?

Support
#1

Hi, I’m wondering why the 2nd section on this page looks different in Safari than it does in Chrome and Firefox. https://www.cvfrc.org/programs/sgma/

One is using custom columns, 3/5 + 2/5. The other is 1/4 + 3/4. Safari seems to stack the columns on top of each other rather than keep them next to each other. Any ideas why?
Thanks

#2

Hello @threeoten,

Thanks for writing in!

Please add following CSS under Pro > Theme Options > CSS:

.x-column {
   margin-right: 3%;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

But why does the .x-column class need a sitewide fix to its margins just to make a stock element of Pro look correct in Safari? Does that mean everyone using Pro is experiencing this same issue until they add this fix?

#4

Hi @threeoten,

The columns are always based on available spaces, and the space has always 100% in total. If the total columns width exceed the 100% then it will always stack. It needs a sitewide fix since it’s always the same regardless of column.

Example,

3 columns is 30.66% + 4% + 30.66% + 4% 30.66% = 100%.

There is always 4% in between each column, and standard on all 3 columns sitewide. Another examples

2 columns is 48% + 4% + 48% = 100%.
4 columns is 22% + 4% + 22% + 4% + 22% + 4% + 22% = 100%.

There is something in your setup that makes the total width more than 100% and I’m not getting it on my installation. The solution is reducing the column width, or the margin width like the above CSS. So example,

2 columns based on 5/5 ( 3/5 + 2/5 ) is ( 50.4% + 8% ) + 3% + ( 33.6% + 4%) = 99%.

Making the spacing less by 1% make sure it doesn’t go 100% in case something added more. Though, it seems to be working on my end even without that CSS. Would you mind providing a screen recording?

Thanks!

#5

screen recording: https://screencast.com/t/mYZDgDoww

#6

Also… in both safari and chrome when I use the inspector I get the following: 65.333% + 30.666% + 4% …which = 99.99%

AND… I notice that when I use the inspector to remove the .vert-cen class from being applied to the row element… it’s fixed.

The .vert-cen class I use for vertical centering was given to me by one of your team members:

.vert-cen {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
}

So how can I keep the vertical centering and not have this problem on Safari?

#7

Hi @threeoten,

Have you tried adding vert-cen to the column class instead of the row? But regardless, you shouldn’t apply it since content builders layout is different that header and footer builder. The columns and rows shouldn’t use flex styling.

Please try enabling the margin less option of your row.

Then add this CSS to your Row’s element CSS.

$el .x-column {
vertical-align: middle;
}

Vertical alignment only works on table layout, and margin less columns are table cell. The downside is, it doesn’t have margins so please add padding instead.

Thanks!

#8

I made them marginless columns and added that CSS to the row element custom CSS… fixed the stacking issue, but the CSS doesn’t seem to do anything because there is no vertical alignment happening.

#9

Hi @threeoten,

Please change the css code to this.

$el .x-column {
    vertical-align: middle !important;
}

Hope that helps

#10

It works, but how can I do the same vertical centering on columns WITH margins?

#11

Hi @threeoten,

The vertical alignment only works on table layout, and margin less columns are table cell. The downside is, it doesn’t have margins so please add padding instead. Enabling the margin back will disable the margin less, hence, disabling the tablet layout as well. It’s not gonna work on column with margin, so please use padding instead.

Thanks!

#12

Are there padding values that would give the same vertical center effect universally? that could be used to apply to the row or column element? Or would it have to be specific for each different element relative to its size and all that? In the past I was using gap elements on top and bottom with certain percentages… but it’s kind of a pain.

#13

Hi @threeoten,

Thanks for reaching out.

Padding is only relative to its container, please try changing your columns padding starting from 4%, increase it until you find the right value. Do it in each column settings and not on row :slight_smile:

Thanks!

#14

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