Archived topic

Icons not aligning in Safari

1 reply · Started by Himanshu on June 3, 2021

Viewing posts 1–2 of 2

June 3, 2021 at 11:55 pm #1809615

HI,

This is a weird issue that is only occurring in Safari mobile view. I have these 3 social icons in the Footer widgets, and on all other browsers, in mobile view, they are center aligned and in one row, but in Safari mobile view, the last icon slips under in the next row, very annoying. Here is how I set up my custom widget widths:

.footer-widgets .footer-widget-1 {
    flex-basis: 16%;
}

.footer-widgets .footer-widget-2 {
    flex-basis: 28%;
}

.footer-widgets .footer-widget-3 {
    flex-basis: 18%;
}

.footer-widgets .footer-widget-4 {
    flex-basis: 38%;
}

.inside-footer-widgets {
	align-items: center;
}

and this is how I defined them in mobile media query:

@media (max-width: 768px) {

.footer-widgets .footer-widget-1, .footer-widgets .footer-widget-2, .footer-widgets .footer-widget-3, .footer-widgets .footer-widget-4 { flex-basis: 100%; }

}

This is a screenshot of the issue.
Link to the website.

Note: It happens only in IOS, Safari or Chrome.

thanks

June 4, 2021 at 4:44 am #1809862

Hi there,

change your media query CSS to this:

@media (max-width: 768px) {
    .footer-widgets .footer-widget-1, .footer-widgets .footer-widget-2, .footer-widgets .footer-widget-3, .footer-widgets .footer-widget-4 {
        width: 100%;
        text-align: center;
    }
}

In mobile the flex-direction becomes a column, so flex-basis 100% applies to 'height'

This archived topic is closed to new replies.

Start building better websites today.