search

rrutsche / react-parallax

A React Component for parallax effect
MIT License
846 stars 75 forks source link

~33% whitespace on LH side of viewport, full width #122

Open atlsykes opened 2 years ago

atlsykes commented 2 years ago

Describe the bug When viewing my react app in chrome on full (or near) screen width, there is a significant amount of undesirable whitespace on the left-hand side present. When I collapse the screen to about half width, the whitespace disappears. New to this package and trying to implement "Basic - background image with fixed blur effect". Using Hashrouter from 'react-router-dom' and materialize css for styling.

To Reproduce Steps to reproduce the behavior:

  1. NPM start
  2. Select Portfolio container

Expected behavior There should be no whitespace on LH side at any viewport size.

Screenshots

JS-react-port-parallax-issue-full-width JS-react-port-parallax-issue-half-width

Desktop/Smartphone (please complete the following information):

Code and/or example portfolio.jsx

`import React from "react"; import { Parallax } from "react-parallax"; import BGimage from "../../Assets/Images/glitter-lights-spots-dots-background-2560x1440.jpg"; import Portfoliocard from "../../components/card/portfolio-card"; import projects from "../../projects.json"; import "./portfolio.css"; //project images import TrackFinder from "../../Assets/Images/Track-finder-screenshot.png"; import STCC from "../../Assets/Images/senior-travel-covid-care-app-screenshot1.png"; import WeatherDashboard from "../../Assets/Images/Weather-dashboard-screenshot.png"; import Insulterator from "../../Assets/Images/Insulterator9000-screenshot.png"; import WorkoutTracker from "../../Assets/Images/Mongo-fitness-tracker-app-screenshot1.png"; import Flashcardz from "../../Assets/Images/Flashcardz-screenshot.png"; const project = projects.elements; const portfolio = () => { return ( <Parallax blur={2} bgImage={BGimage} bgImageAlt="green field with big dots background" dot strength={50}

Portfolio

); }; export default portfolio; `

Sorry for the weird code formatting, but MD won't format my react container properly!

atlsykes commented 2 years ago

Bueller? Can someone look at this please?

rrutsche commented 2 years ago

Yeah I could take a look. But it would be very helpful to put your code example into a running codesandbox as I assume you have some existing css that is also changing the appearance.