What could be causing my CSS styles from a HTML/CSS/JS website to not function properly on my React website?

I came across this animated coursel on Codepen that I really liked and wanted to integrate it into a basic create-react-app website. After moving everything over, including the compiled SCSS into CSS, I noticed that only one element was visible, possibly stacked above all the others. Something seems to have broken, but I can't pinpoint where the issue lies. Any help in resolving this would be greatly appreciated!

Codepen: https://codepen.io/aybukeceylan/pen/RwrRPoO

Here is a snippet of my React Component:

import React from "react";
import "./css/styles.css";

function App() {
  return (
    <div className="container">
      {/* Rest of the component code goes here */}
    </div>
  );
}

export default App;

Below is the CSS file used for styling:

@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
* {
  /* CSS styling properties */
}
/* More CSS styles follow (truncated for brevity) */
/*# sourceMappingURL=HeroSection.css.map */
javascripthtmlcssreactjsflexbox

Answer №1

This code snippet includes CSS, JavaScript, and HTML:

$('input').on('change', function() {
  $('body').toggleClass('blue');
});
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
  font-family: 'DM Sans', sans-serif;
  transition: background .4s ease-in;
  background-color: #c394f8;
  
  &.blue {
    background-color: #428aa6;
  }
}

input[type=radio] {
  display: none;
}

.card {
  position: absolute;
  width: 60%;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform .4s ease;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: 800px;
  max-height: 600px;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.cards {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

#item-1:checked ~ .cards #song-3, #item-2:checked ~ .cards #song-1, #item-3:checked ~ .cards #song-2 {
  transform: translatex(-40%) scale(.8);
  opacity: .4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-2, #item-2:checked ~ .cards #song-3, #item-3:checked ~ .cards #song-1 {
  transform: translatex(40%) scale(.8);
  opacity: .4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-1, #item-2:checked ~ .cards #song-2, #item-3:checked ~ .cards #song-3 {
  transform: translatex(0) scale(1);
  opacity: 1;
  z-index: 1;
  
  img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
  }
}

.player {
  background-color: #fff;
  border-radius: 8px;
  min-width: 320px;
  padding: 16px 10px;
}

.upper-part {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  height: 36px;
  overflow: hidden;
}

.play-icon{ margin-right: 10px; }

.song-info {
  width: calc(100% - 32px);
  display: block;
}

.song-info .title {
  color: #403d40;
  font-size: 14px;
  line-height: 24px;
}

.sub-line {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.subtitle, .time {
  font-size: 12px;
  line-height: 16px;
  color: #c6c5c6;
}

.time {
  font-size: 12px;
  line-height: 16px;
  color: #a5a5a5;
  font-weight: 500;
  margin-left: auto;
}

.progress-bar {
  height: 3px;
  width: 100%;
  background-color: #e9efff;
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  display: block;
  position: relative;
  width: 60%;
  height: 100%;
  background-color: #2992dc;
  border-radius: 6px;
}

.info-area {
  width: 100%;
  position: absolute;
  top: 0;
  left: 30px;
  transition: transform .4s ease-in;
}

#item-2:checked ~ .player #test {
  transform: translateY(0);
}

#item-2:checked ~ .player #test  {
  transform: translateY(-40px);
}

#item-3:checked ~ .player #test  {
  transform: translateY(-80px);
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap">
This section contains only the HTML code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I've made sure you include jQuery for this to work smoothly.

Feel free to copy and paste this code into your application.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving the Image of an Amazon Product using ASIN

My goal is to locate the image URLs for Amazon products using only their ASIN. For instance: This link pertains to a product with the ASIN B07NVVQL66 in the United States. Clicking on it will display an image of the product http://images.amazon.com/imag ...

javascripthtmlimageamazon-web-servicesaws-sdk

Ways to repair an element

Can anyone help me troubleshoot the issue with my count text on a div block? It seems to be affected by changes in screen size. Normal https://i.stack.imgur.com/RZkgr.png On screen resize https://i.stack.imgur.com/hTdCG.png The Code: span.right-cor ...

htmlcssweb

CSS: using the content property to insert a non-breaking space character

Recently, I stumbled upon a unique CSS syntax that caught my attention content:"\00a0"; After researching on w3schools, it elaborates: Definition and Usage The content property is utilized with the :before and :after pseudo-elements to ins ...

css

How can I specify which specific div I want to run code on, rather than all divs with the

This code is affecting all instances of .flow-hold instead of just the div below the .title-hold with text that matches the ==. The reason for this is because I need to adjust the ranges used for each gauge1, gauge2, and gauge3 instances. I attempted $(&ap ...

javascriptjquery

The React autoFocus attribute fails to render

I'm trying to display an input field with autofocus enabled: <input type="text" autoComplete="off" autoFocus={true} className="form-control" /> However, it is showing up like this: <input type="text" autocomplete="off" class="form-control" ...

reactjs

Issue with radio button: checked property remains unchanged

There seems to be an issue with a div element where a table is being appended with input elements of type radio. The checked property does not change when clicked. What could be causing this problem? <input type="radio" id="radHalf0" name="grp0" class= ...

javascriptjqueryasp.net

How come my date input reverted back to one day prior in react?

I've encountered an issue where, when I try to submit a date using input, it sets me back to the previous day. Here's the code snippet in question: const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); ...

reactjs

Get Angular events in the proper order

I am currently facing challenges with event handling in AngularJs. In my service, I send out events using the following line of code : $rootScope.$emit("FNH."+this.status, flowNodeHelper); When receiving the event in service "S1," I handle it as follows ...

javascriptangularjsangularjs-directivedom-eventsangularjs-service

Unable to integrate third-party tools into your Vue JS project via CDN

Currently delving into Vue JS to enhance the interactivity of my django application, I am opting for the route of integrating Vue JS as components within my templates rather than going down the path of a Single Page Application (SPA). It's almost like ...

javascriptdjangovue.jsvuejs2vue-component

What is the approach for for loops to handle non-iterable streams in JavaScript?

In the realm of node programming, we have the ability to generate a read stream for a file by utilizing createReadStream. Following this, we can leverage readline.createInterface to create a new stream that emits data line by line. const fileStream = fs.cr ...

javascriptnode.jsstreamiterable

The files being requested by jQuery Slimbox are not being retrieved properly

I am currently utilizing jQuery slimbox along with its Application Programming Interface (API). Below is the JavaScript code snippet that retrieves image paths through JSON and then triggers the slimbox using its API. $('#main-container').appen ...

javascriptjqueryajaxjsonslimbox

Combining the power of Google Blockly with AngularJS

I am looking for a way to empower advanced users to create and save custom math formulas that will be used in a shopping cart check-out process. These users are not programmers, but can follow instructions easily. The formulas should be editable by the use ...

javascriptangularjsexcelvisual-programmingblockly

Top method for validating a function that generates an observable operator

What is the most effective approach to testing a function that returns an observable with the tap operator? operations(numbers): Observable{ const sumValue = numbers[0]+numbers[1] return sumService.getOperations(sumValue).pipe(tap(randomOperationValue ...

javascripttypescriptjestjsts-jest

Having trouble importing CSS in ReactJS?

While working on my project based on next.js, I encountered a situation where loading CSS in other pages was successful: import css from './cssname.css'; <div className={css.myclass}></div> However, now that I am implementing a ligh ...

cssreactjsjsxnext.js

Deciding on the Best Option for Your Admin Dashboard: Next.js 13 AppRouter vs. Pure React

When creating an admin dashboard, should I opt for Next.js 13 App router or stick to building a single-page application with pure React? I've noticed that Next.js can struggle with interactivity on slower connections. Which approach would provide bett ...

reactjsnext.jsadmindashboardnext.js13

What are some strategies to prevent the scrollTop function from affecting child elements within an accordion?

On my website, I have incorporated a bootstrap 4 accordion that includes a secondary accordion to display or hide additional content: MainAccordionHeader 1 MainAccordionBody 1 SubAccordionHeader a SubAccordionHeader b SubAccordionBody a SubAccordionB ...

javascriptjquerybootstrap-4

Heroku is unable to locate a privately hosted NPM package

UPDATE: It appears that the issue is linked to one of my proprietary packages. Within my project, which was constructed using heroku-create-react-app, I am utilizing a private module. This snippet shows my .npmrc file located in the root directory of the ...

reactjsherokunpm

Menu secured in place within the wrapper

My website is contained in a wrapper with a max width, and I have a fixed side menu that can be toggled with a button. The problem I am facing is keeping the fixed side menu within the page wrapper. Fixed elements are typically positioned relative to the ...

javascriptjqueryhtmlcss

Setting the attribute dynamically for a select box with multiple choices

In my form, I have multiple choice select boxes styled using bootstrap select. Since the app is developed in Express, I am having trouble retrieving the selected values due to bootstrap select creating a div and a list for user interaction. To tackle this ...

javascriptjqueryexpressbootstrap-select

Develop a function for locating a web element through XPath using JavaScriptExecutor

I have been working on developing a method in Java Script to find web elements using XPath as the locator strategy. I am seeking assistance in completing the code, the snippet of which is provided below: path = //input[@id='image'] def getElem ...

javascriptpythonseleniumrobotframework