Site is broken on older browsers HELP =)

Design help General
#1

Hello! I’m hoping someone can help me out, still kind of a newbie lol. Just building a site for our small business.

It seems that all of the grids on our site get messed up on older browsers and the elements stack on top of eachother. A potential client was on our site this morning and called me because our pricing table were all stacked on top of eachother and she couldn’t read it. I’m just grateful she called me and didn’t just move on to another photo booth company =).

Here are are some screenshots…

Capture6
Capture6.JPG1293×955 100 KB
Capture5
Capture5.JPG1269×929 92.8 KB
Capture4
Capture4.JPG1267×931 112 KB
Capture3
Capture3.JPG1283×935 131 KB
Capture2
Capture2.JPG1301×942 121 KB

Thank you so much in advance :upside_down_face::slightly_smiling_face::upside_down_face:

Here is my site Read-Only: https://preview.webflow.com/preview/smileyphotobooths?utm_medium=preview_link&utm_source=designer&utm_content=smileyphotobooths&preview=1765d19803167f524d35f92b11335c03&mode=preview
(how to share your site Read-Only link)

#2

CSS grid is not supported in older versions of IE: https://caniuse.com/#feat=css-grid

You could probably switch all of those layouts to flexbox if you need to support old IE, or just don’t worry about it as the usage is very low for those browsers at this point.

1 Like
#3

IE 11 has partial support for CSS Grid. So layouts that need to work on that EOL browser should be built with standard positioning and minimal use of flex box. Use standard columns instead.

Global use of IE11 is showing at 1.86% (according to caniuse). So you can factor that into your decisions.

When determining what features are supported on what browser / version, a popular tools is caniuse.com.

1 Like
#4

Thank you for your knowledge. I guess it’s not that big of a deal after all LoL.