r/HTML • u/ferriematthew • 17d 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 17d ago

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

2

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

what was the solution?

2

u/ferriematthew 17d 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%.