Last child in column falls below in Safari

Hi team!

So some of my columns in Safari arn’t displaying correctly as the last child falls below. I attempted to add the following code to ensure it’s taking thre right width, but no luck. It does display correct in other browsers

@media (min-width: 768px) and (max-width: 1024px) {
.x-1-3, .x-1-3:last-child {
width: 30.66666%;
}
}

You can see on these pages they are breaking:



Some of these are using the even column code.

Any ideas? Is there something I can do just for safari?

Thank you in advance

Hi There,

Thank you for writing in, that should not happening on any browser. You might have a custom CSS that is affecting the width of your 1/3 columns. I’d like to check it from the inspector but your site’s CSS is optimized and cached, please recall all the custom CSS you added with regards to columns and try to remove it one by one and see which is causing the issue.

If you can’t see custom CSS with regards to this issue, please clear and deactivate your optimizer and caching plugin for a while and provide us login credentials in a secure note so we can take a closer look.

Cheers!

Hi there, so it’s not my Css. As I mentioned, it might have to do with the equail column code I was provided.

I’m using cloudflare so I can only turn on developer mode for a while. I’ll do that now then.

I did provide login details so you could take a look?

Hi there,

You can try to remove the custom code that you added then purge the cache and check if the issue on the columns goes away.

In case you are still having any issue, kindly provide the admin details of your site in a Secure Note so that we can check.

Thank you.

Yes it does have to do with the custom code you guys provided me for the equil columns. So it is causing the issue in Safari.

What modifications need to be made to the code I was provided to fix this?

This was the post regarding the code I was given: https://theme.co/apex/forum/t/equal-columns/2952/9

Again, this is only in safari

Thank you

Hi @reform

In this code snippet you have:

.x-container.equalize  {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;        
}

Please remove these lines:

  -ms-flex-flow: row wrap;
      flex-flow: row wrap; 

I’ve tested that on Safari and I can see this is working, please let me know if this resulted in any undesired result!

Thanks.

perfect and thank you! Fixed the issue.

It was some code I was pasted in a previous post.

Thanks again :slight_smile:

We are delighted to assist you with this.

Cheers!

I just noticed my equil column boxes no longer stack at lower breakpoints and instead get cutoff on the right side.

You can see an example on this page: https://hybridpharm.com/ottawa-medical-cannabis/

The three boxes after the header and intro blurb.

Any ideas?

Hello There,

To make sure that the custom css will only take effect in larger screens so that the column boxes will stacked in lower break points, please update the custom css and use this:

@media(min-width: 768px){
  .x-container.equalize  {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;     
}

  .x-container > .x-column.equalize {
	height: auto !important;
    float: none;
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;           
  }
}

We would loved to know if this has work for you. Thank you.

hmmm yes that worked and I thought to do that as well, but whats strange is it was working fine without previously?

In either case thank you it seams to be working.

As this relates to the equil columns (i belive) I’ll ask one last question I have an issue with rather then start a new topic, but do let me know if you’d perfer a new post for this.

It seams that a inner page link I have set to jump to another section is not working.

I have the following code, which normally works:
<a class="x-btn solid-btn x-btn-small" href="#CANNABIS-CONSULTATION-FORM">Register for access</a>

The section I have the ID assigned: #CANNABIS-CONSULTATION-FORM

I can see the link is passed to the URL but it does not move to the section.

You can see on this page in the first box with the button “Register for access” https://hybridpharm.com/ottawa-medical-cannabis/#CANNABIS-CONSULTATION-FORM

Hi again,

In the button href attribute use full page URL instead of using just #CANNABIS-CONSULTATION-FORM for example your code will look like this:

<a class="x-btn solid-btn x-btn-small" href="http://page/url/#CANNABIS-CONSULTATION-FORM">Register for access</a>

Hope this helps!

Unfortunately, that didn’t work. I can see the full URL is now rendering out with inspector, but it still doesn’t move the section

Hi @reform,

The href="#CANNABIS-CONSULTATION-FORM" should be enough. The problem is the way you added the ID in your section. It’s added like this

CONSULTATION-FORM CANNABIS-CONSULTATION-FORM

The id field only accept one ID, it’s not the same in Class where you can add multiple class name. You should change your section ID to CANNABIS-CONSULTATION-FORM without CONSULTATION-FORM nor spaces.

Thanks!

hmm thats strange though. I am using both of those Id’s in my CSS as well. I have many booking forms on my site taking similar styling and a second ID for this one so I can do different things.

I wasn’t aware that for inner page linking you can only have one ID assigned to a section, So thank you for pointing that out.

I reverted the link back to must the ID (so it’s dynamic if my URL changes) and romoved the CANNABIS-CONSULTATION-FORM as an ID, assigned it as a class instead for my CSS and used the #CONSULTATION-FORM to inner link to the section.

Thank you, I had no idea it wouldn’t work with two ID’s assigned!

Hi there,

It’s HTML standard to only use a single ID. And you’re most welcome!

Cheers!

Oh I wasn’t aware of that! My understanding was that xhtml does support multiple IDs, however the same ID should never be assigned on the same page as it should always be unique.

Good to know and thank you!

Glad we could help.

Cheers!

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