Hi,
I am building a dev site and have 2 rows of 4 columns, each with a v2 button with photo, headline and subheadline.
My problem is on Safari, the 4 columns displays as 3 columns on one line and 1 column on the next
I will add the url in the secure note
The site displays perfectly on Chrome
Hi,
I can’t seem to replicate the issue on my end.
Can you try clearing your safari browser cache and check again.
Thanks
Hi Paul,
I have cleared Safari browser cache, I have cleared WP Rocket Cache, I have turned off Varnish server cache and I am still seeing the same problem on Safari
not only that, I also looked at the site using a proxy and that also showed the problem.
I have checked the site on Chrome & Firefox and only Safari shows the problem
Ok, I’ve looked into the css on Safari Inspect Elements and changing the following CSS fixes the issue
.x-column.x-1-4 {
width: 21.9%;
}
@media screen and (max-width: 767px ){
.x-column.x-1-4 {
width: 100%;
}
}
originally the width was set to 22% but that was enough to push the 4th column to the next row.
Is this something that can be fixed in a future version of pro please
Hello There,
Thank you for the very detailed information. I have created a section with a row having 4 columns in my local install. I view it in Safari and this is how it looks.
https://prnt.sc/in4bgl, https://prnt.sc/in4gfe
I’ve taken closely at your page and indeed I can confirm that you only have 3 columns instead of 4 columns. I investigated your page and it seems that the contents of the columns forces the columns to be much wider than 22% which maybe the reason it is now just 3 columns. Could you please create a test page with a 4 column row having just some text and not much styling in the column contents? We want to double check it in your site whether a 4 empty column would display the same or still display 3 column instead.
Please let us know how it goes.
I have already applied the css fix,
So, unless you are looking at the recent post section (which is correctly a 3 column layout) then I have no idea where you are getting the 3 column view from
I think the original issue is due to four columns and the V2 button element. Also, as the css change to the column width is so small, I suspect the problem maybe to do with the 1px border around each button
The problem area has the headline “What Photography Services Do You Offer?” directly above it
Hey There,
Yes I have checked the correct section.
Could you please create a test page with a 4 column row (just like my test page as shown in my previous reply) having just some text and not much styling in the column contents? We want to double check it in your site whether a 4 empty column would display the same or still display 3 column instead.
Thank you in advance.
I have created a test page (and removed the css fix)
Links in the secure note
Strangely, I cannot recreate the problem on the test page, although now that the css fix is taken out the problem still shows on the home page
Howdy, @scotbaston!
Thanks for writing in and sorry to hear that you seem to be experiencing an issue with this. Upon review of the situation at hand, I believe this is likely due to some custom CSS you have at play on your page and does not lie with the v2 buttons or columns.
I can indeed see the issue of the columns not flowing properly in Safari when viewing your link, but when replicating this exact setup on a local installation and then viewing it in Safari, I am unable to reproduce this same issue. I have setup my own page in a local environment using a four column layout, then setup a Button Element in each of those just as you have (column flexbox layout for content, image up top, text below, border included, et cetera), and when I view that test page in Safari, I do not see the layout issue that is present on your page. Below is a screenshot showing my test in Safari and that the columns are not breaking as they are with your home page:
Regretfully, I’m unable to ascertain the exact source of what I believe to be the issue on your page, but I do see that you have some custom CSS going on, and more specifically on your buttons with the .hover_sheen class. Please test removing all of your custom CSS for a time to see if that remedies the issue, and then from there you can work to narrow down to the problem source (which I believe to likely be the class mentioned previously). Since this is related to a personal customization, you will need to work through it and try some alternatives to see how to resolve it.
Hopefully that helps to point you in the right direction.
Hi @kory,
Thank you for looking into this.
The .hover_sheen class was not in existence when I logged this call (I only added it today). I have disabled the class for now. The only other css that might affect the columns is below (applied to the row to make all columns the same height):
.columnheight {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
I have tried clearing the cache, even viewed the home page via a proxysite and still the issue shows. Any ideas please? I can give login details if required.
@scotbaston, I’ve been taking a look into this and trying all I can to adjust various settings in the builder and try different elements out and I cannot seem to replicate this issue at all in my local installation in Safari. As an aside, I also can’t think of a time when I’ve heard from anyone having a similar issue like this in Safari, so it really does seem to be something uniquely related to your particular environment. The only thing I can recommend at this time is trying to completely remove any custom styling (element level in the builder, page level in the builder, global level in the builder, child theme, et cetera), and disabling any plugin that you think could potentially interfere with this in some way (anything that might be adding markup or styling to the page in some way). It’s a very strange problem indeed, but at this time that is all I can recommend to move forward with to see what might be going on.
Hi @Kory,
I think I’ve figured out how to replicate the problem…but not quite what is causing the problem. On the test page, I added the CSS below to make all the columns the same height. When the CSS is added, the 4 columns wrap to the second row after the 3rd column:
.columnheight {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
When I take the class .columnheight away from the row on the home page, the problem goes away. Any idea what it is about the above CSS that screws up the column formatting.
Thanks for reiterating that. I saw you mention that earlier and I noticed the class on the row, but wasn’t seeing what it was doing. Safari’s dev tools seems to order some of how their styles show up a little differently than Chrome, so it wasn’t showing where I expected.
Below is a revised snippet I’ve made that should address these issues for you (they are notated after the snippet):
@media (min-width: 768px) { /* 1 */
.columnheight {
display: -webkit-flex; /* 2 */
display: flex; /* 2 */
-webkit-flex-wrap: nowrap; /* 3 */
flex-wrap: nowrap; /* 3 */
-webkit-align-items: stretch; /* 4 */
align-items: stretch; /* 4 */
}
.columnheight > .x-column {
-webkit-flex: 1 1 0%; /* 5 */
flex: 1 1 0%; /* 5 */
}
}
margin-right present on the columns before they break to fullwidth at 767px, we need to make sure to wrap out code in a media query to ensure that it only targets the columns when they’re displayed inline (more on this later). We need to use min-width: 768px to be 1px above the max-width: 767px media query that breaks the columns to be fullwidth in the theme.-webkit- specific changes for certain browsers that still only support it (but the vast majority support the standard spec now).flex-flow: nowrap; for this implementation to ensure that our columns never wrap to another row. This makes sure things stay inline and don’t wrap like you had before and while we want it to stay this way inside our media query.stretch properly on the flex cross-axis.margin-right on each column in these larger screen sizes.You can remove the numbered comments in your code, those are just there for the explanation here. Hopefully you find that this is what you’re after.
Cheers!
You sir, are a genius!
That works wonderfully and thank you for the notations as that really helps my understanding
HI @kory,
I have one further question please.
Originally, I had a css rule to change each 4 column row to 2 columns at the media 990px width. I did this by forcing a width of 48% and removing the margin-right padding on the 2nd column.
How would be best to do this with the new flexbox query you provided please?
Hi there,
You can play with the max-width property to achieve what you want on a certain breakpoint. So for example:
.columnheight > .x-column {
max-width: 50%;
}
The code above will force the columns to be 2. Now you can wrap the code above into a media query depending on which breakpoint you want the columns to be like that.
Thank you.
Thank you Christopher,
Although your code does not work with the Flexbox code kindly provided by @kory
Please see the flex css above for details
OK, I have managed to get the CSS working using the following. This CSS is a 4 column row at 991px and up, lower than 991px it becomes 2 rows of 2 columns and then when it switches to mobile it becomes 4 rows of 1 column.
I’m posting this as it maybe useful to others, but also in case you can spot any issues with it.
@media (min-width: 991px) {
.columnheight {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: stretch;
align-items: stretch;
}
.columnheight > .x-column {
-webkit-flex: 1 1 0%;
flex: 1 1 0%;
}
}
@media (min-width: 768px) and (max-width: 990px) {
.columnheight {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: stretch;
align-items: stretch;
}
.columnheight > .x-column {
-webkit-flex: 1 1 47.9%;
flex: 1 1 47.9%;
}
.columnheight > .x-column:nth-of-type(2) {
margin-right: 0;
}
}
Glad you go things working! I would probably tweak things just a bit so you’re not unnecessarily repeating certain property/value pairs:
@media (min-width: 768px) {
.columnheight {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
}
}
@media (min-width: 768px) and (max-width: 990px) {
.columnheight {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.columnheight > .x-column {
-webkit-flex: 1 1 47.9%;
flex: 1 1 47.9%;
}
.columnheight > .x-column:nth-of-type(2) {
margin-right: 0;
}
}
@media (min-width: 991px) {
.columnheight {
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.columnheight > .x-column {
-webkit-flex: 1 1 0%;
flex: 1 1 0%;
}
}
From here you can see I’ve moved the display and align-items declarations into their own media query at the top so they don’t have to be repeated twice. From there, I also reorganized the order of the media queries to ensure there aren’t any potential conflicts (since we’re kind of breaking “upwards” with our media queries, it helps to arrange them this way). Additionally, you should be able to use 48% for the flex-basis part of the one flex declaration above. Finally, you could probably condense this further by just using wrap once for a flex-wrap declaration in the first media query, I was just forcing nowrap the first time to ensure it stays inline, but you could experiment with this and reduce things a bit more.