Older browsers don’t understand 70-30% column responsiveness sidebar

https://ibb.co/B6hXhVk
https://ibb.co/X5NHxCN
EN: what the Firefox inspector shows:
RU: что показывает инспектор Firefox:
<div id="primary" class="content-area">
/wp-content/themes/salal/style.css?ver=1.2.9 – 2853 – @min-width: 992px

.content-area {
    box-sizing: border-box;
    grid-row-start: 2;
    grid-column-start: 1;
    min-width: 0;
}

<aside id="secondary" class="sidebar widget-area clearfix">
/wp-content/themes/salal/style.css?ver=1.2.9 – 2860 – @min-width: 992px

.sidebar {
    grid-row-start: 2;
    grid-column-start: 2;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

• This reply was modified 3 years, 6 months ago by v0van.

EN: how adaptability is made in the theme:
RU: как сделана адаптивность в теме:
/wp-content/themes/salal/style.css
2853

    .content-area {
        box-sizing: border-box;
        grid-row-start: 2;
        grid-column-start: 1;
        min-width: 0;
    }

3139

/* Fallback for Internet Explorer */
@media only screen and (min-width: 768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .content-area {
        width: 70%;
        box-sizing: border-box;
        padding-right: 0.75rem;
    }

3155

/* Fallback for Internet Explorer */
@media only screen and (min-width: 768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .sidebar {
        width: 30%;
        box-sizing: border-box;
        padding-left: 0.75rem;
    }

3169

/*--------------------------------------------------------------
# - Sidebar Position
--------------------------------------------------------------*/
@media only screen and (min-width: 992px) {
    @supports (display: grid) {
        /* Sidebar Left Layout */
        .sidebar-left .site-content {
            grid-template-columns: 3fr 7fr;
        }

        .sidebar-left .content-area {
            grid-column-start: 2;
        }

        .sidebar-left .sidebar {
            grid-column-start: 1;
        }
    }
}

/* CSS Grid Fallback for Internet Explorer */
@media only screen and (min-width: 992px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* Sidebar Left Layout */
    .sidebar-left .content-area {
        order: 2;
        padding-right: 0;
        padding-left: 0.75rem;
    }

    .sidebar-left .sidebar {
        order: 1;
        padding-left: 0;
        padding-right: 0.75rem;
    }
}

EN: in the simplest case – here is my generic working code:
RU: в самом простом случае – вот мой универсальный работающий код:

.column {
    padding: 0px;
    margin: 0px;        
}
@media screen and (min-width: 720px) { 
    .column1 {
        display: inline;
        float: left;
        width: 30%;
    }
    .column2 {
        display: inline;
        float: left;
        width: 70%; 
    }           
}

<div class="column column1">
...
</div>
<div class="column column2">
...
</div>

• This reply was modified 3 years, 6 months ago by v0van.

EN: Hooray! I figured out how to make it work. float: left; not needed.
RU: ура! я разобрался как сделать чтобы работало. float: left; не нужен.

3140

/* Fallback for Internet Explorer */
@media /* only */ screen and (min-width: 768px) /* and (-ms-high-contrast: none), (-ms-high-contrast: active) */ {
 
    .content-area {
        width: 70%; display: inline; /* float: left; */
        box-sizing: border-box;
        padding-right: 0.75rem;
    }
 
    .sidebar {
        width: 30%; display: inline; /* float: left; */
        box-sizing: border-box;
        padding-left: 0.75rem;
    }

I will have to test this on on my end with a test site.
However, I am currently working on an update for this theme–including the premium version.

Best Regards,
Andre