Hi,
I’ve noticed when users go on internet explorer my front page breaks. Does anyone know how to fix this or why it’s happening? It works fine on Google Chrome.
The banner at the top expands to the whole page (seen by the huge logo in the middle). If you navigate to the page on Google Chrome you can see what it’s meant to look like. - Loftuspeak.com.au
Hi James,
Thank you for writing in, that’s a common issue with IE11 where it does not respect the max-width. Please apply the fix provided here.
Hope it helps,
Cheers!
Hi French, thank you for that link.
I applied the code to my CSS and now the banner is not as broken but still needs to be adjusted.
Is there a way to adjust to code to fix the two misalignment issues below (the correct alignment can be seen in Chrome)
e.g. Set styling codes just for IE11 to push the image up or to realign the second set of icons?
Hi James,
Sorry but having a hard time doing inspection on element on IE, would you mind providing us login credentials in a secure note so we can take a closer look on your bars setup.
Thanks,
I’ve attached the secured note with the username and password. Thank you!
Hi James,
Ok thanks, here’s the issue
You added a max-height to your Container, the reason the Chrome able to breach this max-height is because of your 9.7% margins on the images, which lead to the other issue where there is a big gap on the top and bottom of your logo.
I’ve corrected this and the header should look good on any browsers now. Please clear your browser’s cache if the fix did not take effect on your end.
Regarding the footer, the same issue with the Header but worse because here you’re using a lot of negative margins and unequal paddings, and irregular flexbox setup, although the footer looks fine on Chrome, this kind of setup will hunt you down the road (not to mention the issue you’re experiencing in IE now).
Please see the Triple Row Footer XSupport that I created, this is a duplicate of your footer with no negative margins and unequal paddings, the logos in there is aligned using only the flexbox layout.
If you want to learn more about the flexbox layout, please watch the tutorials below.
Flexbox for Rows and Columns (Part 1)
Flexbox for Rows and Columns (Part 2)
Layout Tricks: Auto-Responsive Columns (Part 1)
Layout Tricks: Auto-Responsive Columns (Part 2)
Remember to clear your cache.
Hope it helps,
Cheers!
Thank you so much for fixing the banner! I’ll take a look at Flexbox and try to recreate the footer.
Yes, please take note of the Self Flex setting too, this was part of the issue why the Container is not aligning in IE, and take me time to realize it.
Have a nice day,
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.