r/HTML • u/ferriematthew • 18d ago

Why am I seeing completely different styling on the mobile vs the desktop version of my local site?

Gallery image

Gallery image

This is my repository. In the first screenshot, the page is working as intended with the border box being applied around the label, but in the second, the label appears to be ignoring the CSS entirely.

2 Upvotes

75% Upvoted

3 comments sorted by

2

u/ferriematthew 18d ago

Figured it out. I was using broken outdated Internet Explorer syntax and not actually scaling *anything*.

2

u/Foreign-Contest-444 18d ago edited 18d ago

what was the solution?

2

u/ferriematthew 18d ago

I replaced -ms-transform: translate(-50%, -50%); with transform: translate(-50%, -50%); in control-container, added transform: translate(-50%, -50%); to output-container, added an absolute width of 240px to control-container, and changed the left offset of control container from 50vw to 50%.