Page looks different on server

Hi everyone!

So my netlify page which is https://superlist-supermarket.netlify.app/ looks bigger on the Netlify server and doesn’t load some css features but on my local server works perfectly. I can’t seem to figure out why. It’s my first React page. Any help would be appreciated!

Thanks

An image of how it should look will help us compare, because we don’t know how it should look.

1 Like


Hi! You’re right, sorry. It should look like this and have those tags when you hover the images.

That was easy, as I’ve seen this issue quite a few times on the forums now, only that yours had one more step.

First, when we hover over the image, the class of the text doesn’t change. First, it has a class no-visible, which sets its opacity 0. However, when we hover, the class still remains no-visible. After investigating in your stylesheet, I figured out, it should change to visible. I believe you’re using JavaScript to do this, but probably it’s not working. Sadly, that part you’d have to check in your source code.

Moving on, even after changing the class to visible, the problem doesn’t go because of this:

image

In the other posts that I mentioned before, the problem was the same. In production builds, somehow the opacity: 100% would get converted to opacity: 1%. I believe this has something to do with minification, in the sense, it’s trying to convert 100 to 1 to save 2 bytes, but doesn’t remove the % sign in the end. So, instead of 100%, if you set opacity as 1, it should work. As we can see, you already have the same rule above, but for some reason you’ve duplicated it.

Finally, not related to the issue, but I can see, your CSS has invalid properties. I’d recommend fixing those.

And now a suggestion, if you’re indeed using JavaScript to toggle classes for this use case, you don’t need it. You can use simple CSS like this:

.product .product-selection {
    background: #ff4a49;
    color: #fff;
    /* all other properties from the visible class */
    opacity: 0;
}

.product:hover .product-selection {
  opacity 1;
}

This should do it.

1 Like

Thank you so much for helping me solve the hover issue. I already made the changes!

However, my page still looks weird, it’s like it’s zoomed in.

Do you see it like this or is it just me?

This is how it looks here:

Is it correct?

I guess your screen is bigger so that’s why it looks kind of ok.
On my pc if I zoom out 10% it looks ok on Netlify, but on my local server it looks ok already without having to zoom in or out. It could be a responsive issue but that doesn’t really explain why it works fine on my local server and not on Netlify.
If you know what this could be it would really help me, if not that’s ok you’ve helped me a lot :slight_smile:

Not sure how exactly it’s looking there, but here’s somethings you can try:

.container {
  width: 100%;
  /* remove all responsive max-widths */
}
.Products {
  height: 90vh;
  overflow: auto;
  width: calc(100vw - 55ch);
}
.Superlist {
  margin: 0;
  float: right;
}
.total {
  width: 55ch;
}

The result is something like:

No overlapping elements. The above code might need some additional changes though.

1 Like

Thank you so much! :slight_smile: