Padding Issues on IE11

[xponent21]

Hello Guys,

Our Areas - Estate Realty Group

Padding is not working on IE11 . I checked some solutions of the forum but it didnt work.

Can you take a look?

[tristup]

Hi @xponent21,

Thanks for reaching out.
I’ve checked your site in Edge browsers at my end and it looks identical to me.
Here’s what I am seeing:

Screenshot 1: Chrome Browser
Screenshot 3: Edge Browser

Can you please check that whether your browser is up to date or not, if not please update and check it once again? Please also try once by clearing the browser cache and disable any browser extensions you may be using, as these can sometimes interfere.

If you are still having this issue, please mention the device name and version, and also the operating system you are using, that helps us to replicate the issue at our end.

Hope it helps.
Thanks

[xponent21]

Hello,

As stated the issue is on IE11 not edge.

Looking forward for your reply.

Thank you.

[tristup]

Hi @xponent21,

Sorry for the confusion, the screenshot taken in IE 11 only and it looks identical to the output of Chrome browser. Can you please provide a screenshot or any video to understand what you are seeing at your end.

Thanks

[xponent21]

Hello,

Screenshot attached, same error all white columns.

Thank you for your help

[nabeel]

Hey @xponent21,

Thank you for providing the screenshot, I was able to replicate the issue in IE11. In Ethos stack the left and right padding of columns is set to 0 by default for IE browsers only. To fix this, I added the following code in the Element CSS of the Section that contains all the rows:

.no-preserve3d $el .x-col {
  padding-left: 30px !important;
  padding-right: 30px !important;
  flex: 1;
}

This seems to have fixed the padding issue, try clearing your browser’s cache and check your site again.

Hope this helps!

[alexander]

Hi @xponent21,

Just wanted to chime in here after seeing the bug report. Regretfully this one isn’t an easy fix because of some challenges in how IE11 does flexbox differently. It’s unlikely we’ll have a fix for it any time soon because making adjustments here could introduce breaking changes to the element as a whole. Normally it’s something that would be handled by having a gap set on the row but that wouldn’t accommodate your design with the images filling to the column edges.

Here are a few ideas that may help tackle this moving forward:

• If you only need this on one page, Nabeel’s solution is the best way to solve it.
• If you need to do this many times over, I’d advise adding CSS similar to the above but setting it up with a custom class like ie-p-30 (IE11 padding 30) that you put on the section. Then you can use that on any section and any page
• If you don’t want to use any custom CSS, we have an older version of the Rows/Columns that don’t use flexbox. They have less customization options, but don’t suffer from this issue. If you hold cmd/ctrl and press “Add Section” it will give you a Classic Section which you can use to build your page layouts.

I know this probably isn’t the news you were anticipating, but hopefully this helps shed some light on the situation.