fix: footer wrap text

Author: qitpydev

package.json

@@ -31,6 +31,7 @@
     "react-github-calendar": "^3.4.0",
     "react-icons": "^4.4.0",
     "react-redux": "^8.0.2",
+    "react-responsive": "^9.0.2",
     "react-router-dom": "6",
     "react-scripts": "5.0.1",
     "recharts": "^2.3.0",

src/pages/Portfolio/features/PortfolioContent/AppCenter/AppCenter.scss

@@ -28,6 +28,12 @@
             grid-area: 3 / 1 / 3 / 1;
         }
     }
+    .app_center-explore_more {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: row;
+    }
   }
 
 @media only screen and (max-width:1230px) {
@@ -57,4 +63,5 @@
         justify-content: center;
         flex-direction: column;
     }
-  }
+  }
+

src/pages/Portfolio/features/components/ExploreMore/ExploreMore.scss

@@ -1,4 +1,5 @@
 .explore-more {
+    margin: auto;
     position: relative;
     color: green;
     display: flex;
@@ -14,4 +15,19 @@
     flex-direction: column;
     width: 200px;
     // background-color: red;
-}
+}
+
+@media only screen and (max-width:510px) {
+    .explore-more {
+        display: none;
+    }
+
+    .weekly-progress {
+        margin: auto;
+        padding: 20px;
+        position: absolute;
+        width: 100%;
+        left: 0;
+    }
+  }
+

src/pages/Portfolio/features/components/SkillItem/SkillItem.scss

@@ -5,7 +5,14 @@ $tagHeight: 30px;
     height: $tagHeight;
     width: 100%;
 
+    @media only screen and (max-width:1230px) {
+        &-label {
+            content: "KK";
+        }
+    }
+
     &-label {
+        white-space: nowrap;
         position: relative;
         font-size:large;
         font-weight: 600;

src/pages/Portfolio/features/components/SkillItem/SkillItem.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import './SkillItem.scss'
 import { SkillDetail } from '../../../../../data'
-// import {SkillDetail} from '../../../data'
+import MediaQuery from 'react-responsive';
 
 SkillItem.defaultProps = {
   id: "id",

yarn.lock

@@ -3693,6 +3693,11 @@ css-loader@^6.5.1:
     postcss-value-parser "^4.2.0"
     semver "^7.3.5"
 
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+  integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==
+
 css-minimizer-webpack-plugin@^3.2.0:
   version "3.4.1"
   resolved "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz"
@@ -5432,6 +5437,11 @@ human-signals@^2.1.0:
   resolved "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+hyphenate-style-name@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 [email protected]:
   version "0.4.24"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
@@ -6615,6 +6625,13 @@ [email protected]:
   dependencies:
     tmpl "1.0.5"
 
+matchmediaquery@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.1.tgz#8247edc47e499ebb7c58f62a9ff9ccf5b815c6d7"
+  integrity sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==
+  dependencies:
+    css-mediaquery "^0.1.2"
+
 [email protected]:
   version "2.0.14"
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz"
@@ -7792,7 +7809,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8010,6 +8027,16 @@ react-resize-detector@^7.1.2:
   dependencies:
     lodash "^4.17.21"
 
+react-responsive@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-9.0.2.tgz#34531ca77a61e7a8775714016d21241df7e4205c"
+  integrity sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==
+  dependencies:
+    hyphenate-style-name "^1.0.0"
+    matchmediaquery "^0.3.0"
+    prop-types "^15.6.1"
+    shallow-equal "^1.2.1"
+
 react-router-dom@6:
   version "6.4.2"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz"
@@ -8618,6 +8645,11 @@ [email protected]:
   resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
+shallow-equal@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"