🐛 full width issue

jagnani73 · Jul 8, 2021 · d8db724 · d8db724
1 parent d449baa
commit d8db724
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-easy-marquee",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "homepage": "https://jagnani73.github.io/react-easy-marquee",
   "description": "A marquee component for React using CSS.",
   "author": {

diff --git a/src/index.tsx b/src/index.tsx
@@ -27,21 +27,33 @@ const Marquee = ({
       style={{
         display: "flex",
         overflow: "hidden",
+        alignItems: "center",
         position: "relative",
         backgroundColor: background || "transparent",
         height: height || "5rem",
         width: width || "100%",
       }}
     >
       {offsetValues.map((offset) => (
-        <div key={offset}>
+        <section
+          key={offset}
+          style={{
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            position: "absolute",
+            alignItems: "center",
+            display: "flex",
+            minWidth: "100%",
+            minHeight: "100%",
+          }}
+        >
           <Animation reverse={reverse} offset={offset} axis={axis} />
 
           <div
             style={{
               width: "100%",
               height: "100%",
-              position: "absolute",
+              whiteSpace: "nowrap",
               display: "flex",
               overflow: "hidden",
               justifyContent: "space-around",
@@ -65,7 +77,7 @@ const Marquee = ({
           >
             {children}
           </div>
-        </div>
+        </section>
       ))}
     </div>
   );