finished mobile page calendar

src/App.js

@@ -10,7 +10,7 @@ const CandidatePage = lazy(() => import('./pages/CandidatePage'));
 const CalendarPage = lazy(() => import('./pages/CalendarPage'));
 
 const App = () => {
-  const [isAuth, setIsAuth] = useState(false);
+  const [isAuth, setIsAuth] = useState(true);
 
   return (
     <Router>

src/components/Calendar/Calendar.js

@@ -12,7 +12,7 @@ const Calendar = () => {
           <h2 className={style.calendar__title}>
             Добрый день, <span>Александр !</span>
           </h2>
-          <div className="col-xl-12 d-flex justify-content-between align-items-center">
+          <div className="col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row">
             <div className={style.calendarHeader__info}>
               <img className={style.calendarHeader__info__img} src={calendarMale} alt="img" />
               <h3 className={style.calendarHeader__info__name}>
@@ -30,7 +30,7 @@ const Calendar = () => {
         </div>
 
         <div className="row">
-          <div className="col-12">
+          <div className="col-12 col-xl-12">
             <CalendarComponent />
             <p className={style.calendarFooter__text}>
               Июнь : <span> 60 часов </span>

src/components/Calendar/Calendar.module.css

@@ -11,6 +11,56 @@
   margin-bottom: 60px;
 }
 
+@media (max-width: 575.98px) {
+  .calendar__title {
+    font-size: 5em;
+    text-align: center;
+    margin: 40px 0;
+  }
+}
+
+@media (max-width: 560.98px) {
+  .calendar__title {
+    font-size: 4.8em;
+  }
+}
+
+@media (max-width: 540.98px) {
+  .calendar__title {
+    font-size: 4.6em;
+  }
+}
+
+@media (max-width: 520.98px) {
+  .calendar__title {
+    font-size: 4.4em;
+  }
+}
+
+@media (max-width: 486.98px) {
+  .calendar__title {
+    font-size: 4.2em;
+  }
+}
+
+@media (max-width: 466.98px) {
+  .calendar__title {
+    font-size: 4em;
+  }
+}
+
+@media (max-width: 446.98px) {
+  .calendar__title {
+    font-size: 3.8em;
+  }
+}
+
+@media (max-width: 425.98px) {
+  .calendar__title {
+    font-size: 3.6em;
+  }
+}
+
 .calendar__title > span {
   color: #52b709;
   font-style: normal;
@@ -26,6 +76,23 @@
   height: 112px;
 }
 
+@media (max-width: 575.98px) {
+  .calendarHeader__info {
+    width: 74%;
+    height: 94px;
+    margin-top: 142px;
+    margin-bottom: 40px;
+  }
+}
+
+@media (max-width: 375.98px) {
+  .calendarHeader__info {
+    width: 84%;
+    height: 94px;
+    margin-top: 112px;
+  }
+}
+
 .calendarHeader__info__img {
   position: absolute;
   width: 132px;
@@ -34,6 +101,15 @@
   top: -10px;
 }
 
+@media (max-width: 575.98px) {
+  .calendarHeader__info__img {
+    position: absolute;
+    width: 110px;
+    height: 110px;
+    left: 0;
+  }
+}
+
 .calendarHeader__info__name {
   font-family: 'GT Eesti Pro Display';
   font-size: 2em;
@@ -58,6 +134,89 @@
   text-align: left;
 }
 
+@media (max-width: 575.98px) {
+  .calendarHeader__title__text {
+    position: absolute;
+    top: 0;
+    left: 10%;
+    font-size: 4.4em;
+  }
+}
+
+@media (max-width: 564.98px) {
+  .calendarHeader__title__text {
+    font-size: 4.2em;
+  }
+}
+
+@media (max-width: 544.98px) {
+  .calendarHeader__title__text {
+    font-size: 4em;
+  }
+}
+
+@media (max-width: 524.98px) {
+  .calendarHeader__title__text {
+    font-size: 3.8em;
+  }
+}
+
+@media (max-width: 504.98px) {
+  .calendarHeader__title__text {
+    font-size: 3.6em;
+  }
+}
+
+@media (max-width: 484.98px) {
+  .calendarHeader__title__text {
+    font-size: 3.4em;
+  }
+}
+
+@media (max-width: 464.98px) {
+  .calendarHeader__title__text {
+    font-size: 3.2em;
+  }
+}
+
+@media (max-width: 444.98px) {
+  .calendarHeader__title__text {
+    font-size: 3em;
+  }
+}
+
+@media (max-width: 375.98px) {
+  .calendarHeader__title__text {
+    font-size: 2.7em;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .calendarHeader__title__img {
+    position: absolute;
+    bottom: -40px;
+    left: 20%;
+  }
+}
+
+@media (max-width: 525.98px) {
+  .calendarHeader__title__img {
+    left: 15%;
+  }
+}
+
+@media (max-width: 414.98px) {
+  .calendarHeader__title__img {
+    left: 10%;
+  }
+}
+
+@media (max-width: 375.98px) {
+  .calendarHeader__title__img {
+    left: 5%;
+  }
+}
+
 .calendarHeader__btn > button {
   width: 280px;
   height: 62px;

src/components/Calendar/CalendarComponent.module.css

@@ -8,13 +8,20 @@
   padding-bottom: 94px;
 }
 
+@media (max-width: 575.98px) {
+  .CalendarComponent {
+    margin-bottom: 40px;
+    padding: 28px 0 48px 0;
+  }
+}
+
 .CalendarComponent__header {
   display: flex;
 }
 
 .CalendarComponent__header > h3 {
   font-family: 'GT Eesti Pro Display';
-  font-size: 25px;
+  font-size: 2.5em;
   font-weight: 400;
   font-style: normal;
   letter-spacing: normal;
@@ -22,6 +29,12 @@
   text-align: left;
 }
 
+@media (max-width: 575.98px) {
+  .CalendarComponent__header > h3 {
+    font-size: 1.6em;
+  }
+}
+
 .CalendarComponent__header__box {
   display: flex;
   align-items: center;
@@ -50,6 +63,12 @@
   margin: 36px 0;
 }
 
+@media (max-width: 575.98px) {
+  .CalendarComponent__rectangle {
+    margin: 24px 0;
+  }
+}
+
 .CalendarComponent__rectangle > img {
   width: 100%;
 }
@@ -93,11 +112,115 @@
   text-align: center;
 }
 
+@media (max-width: 575.98px) {
+  .CalendarComponent__form > button {
+    width: 72px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 560.98px) {
+  .CalendarComponent__form > button {
+    width: 70px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 540.98px) {
+  .CalendarComponent__form > button {
+    width: 68px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 520.98px) {
+  .CalendarComponent__form > button {
+    width: 66px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 500.98px) {
+  .CalendarComponent__form > button {
+    width: 64px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 480.98px) {
+  .CalendarComponent__form > button {
+    width: 60px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 460.98px) {
+  .CalendarComponent__form > button {
+    width: 56px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 440.98px) {
+  .CalendarComponent__form > button {
+    width: 52px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 428.98px) {
+  .CalendarComponent__form > button {
+    width: 50px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 414.98px) {
+  .CalendarComponent__form > button {
+    width: 49px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 395.98px) {
+  .CalendarComponent__form > button {
+    width: 46px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 350.98px) {
+  .CalendarComponent__form > button {
+    width: 44px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 349.98px) {
+  .CalendarComponent__form > button {
+    width: 42px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 346.98px) {
+  .CalendarComponent__form > button {
+    width: 40px;
+    height: 40px;
+  }
+}
+
 .calendarIcon {
   margin-right: 10px;
   margin-top: -4px;
 }
 
+@media (max-width: 575.98px) {
+  .calendarIcon {
+    display: none;
+  }
+}
+
 .before {
   opacity: 0.2;
 }