HELP: Took a Shopify Job 3 Days Ago and I'm Still Not Done

Hey! Still struggling with this one. Here's where I'm at:
Table markup + wrappers:
<div class="product-info__compare-scroll-wrapper">
<div class="product-info__compare-table">
<div class="product-info__compare-labels">...</div>
<div class="product-info__compare-col product-info__compare-col--brand">...</div>
<div class="product-info__compare-competitors">
<div class="product-info__compare-col">...</div>
<div class="product-info__compare-col">...</div>
</div>
</div>
</div>
CSS on mobile:
.product-info__compare-scroll-wrapper {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
overflow-x: visible;
}
.product-info__compare-table {
padding-left: 16px;
padding-right: 16px;
max-width: 100%;
box-sizing: border-box;
width: 100%;
}
Still getting clipped on the right — the inner padding doesn't seem to take effect at all. Any ideas would be hugely appreciated! 🙏

Sorry for the late replies everyone — I've been completely heads down trying to fix these issues and only just came up for air! Really appreciate every single comment here.
To those who left technical suggestions — the MutationObserver tip and checking parent overflow: hidden are both going on my list right now. I hadn't thought about JS injection timing fighting my CSS at all, that could be exactly what's happening. Will report back!
And to everyone who left kind words — honestly wasn't expecting that, it really helped. It's been a messy few days and knowing other devs have been through the same "Shopify struggle" makes it feel a lot less lonely. Still in the trenches but making progress! 🙏

yeah this is one of those setups that gets messy fast, especially with shopify themes fighting you

if you want I can take a quick look at it with you and see if there’s a simpler way to approach it — no pressure

The JS inline style problem has one reliable fix. Use a MutationObserver to watch for the element and apply your styles after the injection fires. !important wont help you there because the JS runs after your CSS.

For the negative margin breaking child width, check if the parent has overflow hidden set. That kills width calculations on nested elements in weird ways.

And honestly, going from zero Shopify knowledge to debugging theme JS conflicts in 3 days is not small. Most devs avoid Shopify specifically because the theme architecture is messy. You are already past the hard part.

The JS inline styles problem is nasty specifically because Shopify themes inject them after DOM load, meaning your CSS fires before the overrides land. One approach that sometimes works: a MutationObserver watching for the element, then applying your styles reactively after the injection happens. Did the client have a specific deadline or is this an open-ended contract?

Hello, Lyra!!

I usually don't goo to this kind of posts but for real... what a bummer!

And, hey, going from not knowing what Shopify was to debugging CSS, layout issues, and JS conflicts in 3 days… that’s not small, even if it feels messy right now!

Also, this:
“¥1500 in every yuan of it tuition.”

That’s the mindset! I love it! Most people pay to learn this stuff, u know? You got paid and got thrown into real problems: that is a level up!

And yeah, what you’re running into is exactly where things stop being “basic”, and that’s the real work!

And I'm gonna be very honest here, Lyra, even if the job isn’t fully done yet - I can understand that can be frustrated- you already leveled up hard. And the only fact you can name the problems clearly means you’re way past beginner confusion. So cheer up!!

Hope someone helps you close those last issues, I'm not an expert on this field but wanted to cheer you up a little. You’re doing it the right way: in public, in the mess, learning fast!

Getting paid to learn the "Shopify struggle" is a classic rite of passage, Lyra. Those JS-injected inline styles are a nightmare even for seasoned devs, but fighting through the child width calculations is where you really earn that tuition.
I’m currently running a project in Tokyo (Tokyo Lore) that highlights builders who push through technical hurdles just like this. Since you're already in the trenches solving "unsolvable" CSS bugs, entering this round could be a great way to turn that hard-earned knowledge into a winning case study.

Haven’t worked much with Shopify themes, but those issues usually come from container overflow math or styles being reapplied by JS after load. If you share the page, happy to help debug with you.