Problem with Images

Support
, ,
1

Hello,

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

2

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.
3

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

localhost.PNG
localhost.PNG1920×1034 95.6 KB

4

Thank you for the screenshot.

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

Screen Shot 2022-01-28 at 7.32.02 am
Screen Shot 2022-01-28 at 7.32.02 am762×238 22.8 KB

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.

5

Thank you very much! No it seems ok!

1 Like