مشكلة جعل الموقع يناسب الجوال

يمكنك استخدام مكتبة بوتستراب الذي توفر لك خصائص أكثر من رائعة في جعل الموقع متجاوب مع جميع الشاشات لذلك يمكنك الاطلاع على توثيق مكتبة بوتستراب من هنا ، و هذه المكتبة توفر مكونات جاهزة يمكنك استخدامها في موقعك بشكل كامل و هذه المكونات قابلة للتخصيص من قبل المطور أي بمعنى يمكن إجراء تعديلات عليها بشكل كلي لتناسب احتياجات المبرمج، و أيضا هناك طريقة أخرى و هي استخدام Media Queries التي تكون التركيبة العامة لها كالتالي 

/* هنا للشاشات الصغيرة جدا*/
@media (max-width: 576px) { ... }

/* هنا لشاشات التابلت وغيرها من الأجهزة اللوحية */
@media (max-width: 768px) { ... }

/* هنا لشاشات الحاسوب المكتبية*/
@media (max-width: 992px) { ... }

/* هنا لشاشات الكبيرة*/
@media (max-width: 1200px) { ... }

بحيث يمكن تنسيق الموقع ليكون متوافق مع شاشات الجوال كالتالي 

@media (max-width: 576px) {
	.navi a {
		text-decoration: none;
		color: #3a6cf4;
		font-weight: 500;
		font-size: 0.1em;
		padding-right: 23px;
	}
	
	.main-btn {
		text-align: center;
		display: block;
	}
	
	.social-icons {
		text-align: center;
		margin: 20px 0;
	}
}

بحيث يمكنك إكمال تنسيق الصفحة بناء على عرض الشاشة التي تحتاج أن يظهر عليها الموقع بالشكل الذي تريده , ويكون كامل ملف css.css 

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
    font-family: 'Noto Kufi Arabic', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    direction: rtl;
}

header{
    background-color: #f0f0f0;
    width: 100%;
    position: fixed;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 200px;
}

.logo{
    text-decoration: none;
    color: #3a6cf4;
    font-weight: 700;
    font-size: 1.8em;

}

.navi a {
    text-decoration: none;
    color: #3a6cf4;
    font-weight: 500;
    font-size: 1.1em;
    padding-right: 30px;
}

.navi a:hover{
    color: #601cfc;
}

section {
    padding: 100px 200px;
}

.main{
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.4) url(landing-image.png) no-repeat;
    background-blend-mode: darken;
    background-size: cover;
    background-position: center;
    padding-bottom: 60px;
   
}

.main h2{
    color: #fff;
    font-size: 1.4em;
    font-weight: 500;
}

.main h2 span{
    display: inline-block;
    margin-bottom: 10px;
    color: #4e9eff;
    font-size: 3em;
    font-weight: 600;
}

.main h3{
    color: #fff;
    font-size: 2em;
    font-weight: 700; 
    margin-top: 10px;
    margin-bottom: 30px;  
}

.main-btn{
    color: #fff;
    background-color: #3a6cf4;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 600;
    display: inline-block;
    padding: 0.25em 3.1875em;
    border-radius: 15px;
    margin-top: 10px;
    margin-bottom: 5px;
    transition: 0.7s ease;
}

.main-btn:hover{
    background-color: #601cfc;
    transform: scale(1.1);
}

.social-icons a{
    color: #fff;
    font-size: 1.7em;
    padding-left: 30px;
    margin-right: 5px;
}

.title{
    display: flex;
    justify-content: center;
    color: #3a6cf4;
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 30px;
}

.content{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.card{
    background-color: #fff;
    width: 21.25em;
    box-shadow: 0px 5px 25px rgba(1 1 1 / 15%);
    border-radius: 10px;
    padding: 25px;
    margin: 15px;
    transition: 0.7s ease;
}

.card:hover{
    transform: scale(1.1);
}

.icon{
    color: #3a6cf4;
    font-size: 8em;
    text-align: center;
}

.info{
    text-align: center;
}


.info h3{
    color: #3a6cf4;
    font-size: 1.2em;
    font-weight: 700;
    margin: 10px;
}

.cv{
    width: 100%;
    min-height: 100vh;
    background-color: #000016;
}

.cv-description{
    color: #fff;
    font-size: 1.4em;
    font-weight: 500;
}


.links a:checked{
    color: #f0f0f0;
}

p a{
    color: #3a6cf4;
    text-decoration: none;
}

p a:hover{
    color: #fff;
}

.cards-contact .content .icon{
    font-size: 4.5em;
}

.info-2{
    text-align: center;
}


.info-2 h3{
    color: #000;
    font-size: 1.2em;
    font-weight: 700;
    margin: 10px;
}

.info-2 p{
    font-size: 1.5em;
    font-weight: 700;
}

.footer{
    background-color: #000016;
    color: #fff;
    padding: 2em;
    display: flex;
    justify-content: space-between;

}

.footer-title{
    font-size: 1.3em;
    font-weight: 600;
}

.footer-title span{
    color: #3a6cf4;
}

#menu{
    width: 25;
    cursor: pointer;
}


@media (max-width: 576px) {
	.navi a {
		text-decoration: none;
		color: #3a6cf4;
		font-weight: 500;
		font-size: 0.1em;
		padding-right: 23px;
	}
	
	.main-btn {
		text-align: center;
		display: block;
	}
	
	.social-icons {
		text-align: center;
		margin: 20px 0;
	}
}

@media (max-width: 768px) {
	
}

@media (max-width: 992px) { 
	
}

@media (max-width: 1200px) { 
	
}

@media (max-width:300px){
    body{
        font-size: 10px;
     
    }
}

@media (max-width:1023px){
    header{
        padding: 12px 20px;
    }

    .navi a{
        padding-left: 10px;
    }

    .title{
        font-size: 1.8em;
    }

    section{
        padding: 120px 20px;
    }

    .main-content h2{
        font-size: 1em;
    }

    .main-content h3{
        font-size: 1.0em;
    }

    .content{
        flex-direction: column;
        align-items: center;
    }

}

@media (max-width:641px){
    body{
        font-size: 12px;
    }

    .main h2{
        font-size: 1em;
        display: block;
    }

    .main-content h2{
        font-size: 0.8em;
    }

    .main-content h3{
        font-size: 1.4em;
    }
}