Problem with Images


I need help with Image Css. When I open my project from Terminal npm start it works properly. When I deploy with Netlify,it doesn’t. I tried several changes about links (stylesheets), but I couldn’t find a solution. The problem is in dance page.

Netlify site: Anna Vardaxoglou Full Site
GitHub repository: GitHub - AnnaVarda/react-full-site

Thank you

Welcome to the forums @AnnaVarda

The only issue I see with CSS is the 404 on /app.css. This is a hard-coded <link...> in public/index.html however the file app.css does not exist. The App.css in the src directory is imported into App.js

import './App.css';

I suggest you remove the <link href="/app.css" rel="stylesheet" type="text/css" /> from the public/index.html file.

Some of the pages aren’t working properly, for a couple of reasons.

  1. You need to put a _redirects file in public with the following
    /* /index.html 200
    This is explained in this section of Netlify’s documentation as well as this forum post.
  2. In the About.js page you have <a href=...> links instead of using <Link...> tags from react-router-dom as done in Navbar.js.
    I suggest changing all internal links to <Link...> and leaving <a href=...> for external links only.

Thank you, but again the gallery css is not working in Netlify as it does in localhost

Thank you for the screenshot.

The issue is the columns of the .gallery style. Both Chrome and Firefox say it is invalid

Though you specify column-width and column-count separately in Gallery.css, these are joined by the browser. I suggest setting column-width to auto (including the -moz and -webkit versions.

The _redirects file you created while correct is in the wrong location though. It needs to go into the public directory.

Thank you very much! No it seems ok!

1 Like