كيف يمكن منع تجاوز العناصر على المحور الأفقي في الشاشات الصغيرة والمتوسطة في اطار عمل بوتستراب؟

منتصر احمد · 16 مايو 2022

كود ال html :


<!DOCTYPE html>

<html lang="en">



<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" sizes="30×30" href="images/mf-avatar.svg">

  <title>portfolio | mohamed montaser</title>

</head>



<body>

  <nav class="navbar navbar-expand-lg bg-light">

    <div class="container">

      <a class="navbar-brand" href="#"><img src="images/mf-logo.svg" alt=""></a>

      <div>

        <ul class="navbar-nav me-auto mb-2 mb-lg-0">

          <li class="nav-item">

            <button class="btn mentor-btn">Mentorship</button>

          </li>

          <li class="nav-item">

            <button class="btn hello-btn">Say Hello</button>

          </li>

        </ul>

      </div>

    </div>

  </nav>

  <section class="landing">

    <div class="container">

      <div class="row">

        <div class="col-12 text-center">

          <div class="text-box">

            <h1>Designer, Front-end Developer & Mentor</h1>

            <p>I design and code beautifully simple things, and I love what I do.</p>

            <img src="images/mf-avatar.svg" alt="">

          </div>

          <img src="images/hero.svg" alt="">

        </div>

      </div>

    </div>

  </section>

  <section class="my-skills">

    <div class="container-fluid">

      <div class="row first-row">

        <div class="col-12 text-center">

          <div class="text-box m-auto">

            <h2>Hi, I’m Mohamed. Nice to meet you.</h2>

            <p>

              full stack developer and i work as free lancer

              i start from about 1 year ago and i like programming

              i work hard to be the top programmer in middle east

              i finshed many courses in front end and back end and this is degree i have

              like <span><a href="https://academy.hsoub.com/certificate/ZGY21Y416HM5GF0ZDQCBBBXXK.pdf"

                  target="_black">hsoub

                  academy</a></span>

            </p>

          </div>

        </div>

      </div>



      <div class="row second-row">

        <div class="col-11 text-center">

          <div class="row">

            <div class="col-3"><img src="images/frontend.svg" alt=""></div>

            <div class="col-3"><img height="50" height="48" src="images/back-end.svg" alt=""></div>

          </div>

        </div>

      </div>

    </div>

  </section>

</body>



</html>

************************************************************************************

كود ال sass :

// Start Global Rules

$main-color: #7510f7;



@font-face {

  font-family: "Cairo";

  src: url('../fonts/Cairo-Light.ttf'),

    url('../fonts/Cairo-Regular.ttf'),



    url('../fonts/Cairo-Medium.ttf'),

    url("../fonts/Cairo-SemiBold.ttf"),

    url('../fonts/Cairo-Black.ttf')

}



*,

*::before,

*::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: "Cairo", sans-serif !important;

}



a {

  text-decoration: none !important;

}



::-webkit-scrollbar {

  width: 6px;

}



::-webkit-scrollbar-track {

  background: white !important;

}



::-webkit-scrollbar-thumb {

  background: rgba(0, 0, 0, 0.76) !important;

  border-radius: 10px;

}



::-webkit-scrollbar-thumb:hover {

  background: black !important;

}



.btn {

  box-shadow: none !important;

}



// End Global Rules



// navbar

.navbar {

  padding: 30px 25px 0 25px !important;



  .container {

    display: flex;

    justify-content: space-around;

    align-items: center;



    .navbar-brand {

      img {

        max-height: 3rem;

      }

    }



    div {

      .navbar-nav {

        .nav-item {

          .mentor-btn {

            font-size: 18px;



            &:hover {

              color: $main-color !important;

            }

          }



          .hello-btn {

            border: 2px solid $main-color;

            border-radius: 30px;

            color: #7510f7;

            padding: 8px 20px;

            display: flex;

            justify-content: center;

            align-items: center;

            font-size: 18px;

            font-weight: 500 !important;



            &:hover {

              background-color: $main-color;

              color: white;

            }

          }

        }

      }

    }

  }

}



.landing {

  .text-box {

    margin-top: 110px;



    h1 {

      font-size: 3rem;

      font-weight: 900;

    }



    p {

      margin-top: 2rem;

      font-size: 25px;

      font-weight: 300 !important;

    }



    img {

      margin-top: 20px;

      margin-bottom: 100px;

    }

  }

}



.my-skills {

  .container-fluid {

    .first-row {

      background: $main-color;

      height: 80vh;

      padding: 60px;

      color: white;



      .text-box {

        h2 {

          font-weight: bold;

          margin-bottom: 34px;

        }



        p {

          font-size: 19px;



          a {

            color: black !important;

          }

        }

      }

    }



    .second-row {

      background-color: white;



      .col-11 {

        background: white;

        margin: auto;

        height: 500px;

        position: relative;

        bottom: 209px;

        border-radius: 18px;



        .row {

          display: flex;

          justify-content: space-between;

          padding: 32px;

        }

      }

    }

  }

}

تحدث في كل الموقع

Adnane Kadri · 16 مايو 2022

هل يمكنك ارفاق ملفات المشروع بشكل مضغوط؟ لا يبدوا ان التنسيقات المرفقة تعمل بشكل صحيح لدي.

منتصر احمد · 16 مايو 2022

بتاريخ 59 دقائق مضت قال Adnane Kadri:

هل يمكنك ارفاق ملفات المشروع بشكل مضغوط؟ لا يبدوا ان التنسيقات المرفقة تعمل بشكل صحيح لدي.

New project.zip

Adnane Kadri · 16 مايو 2022

بتاريخ 4 ساعات قال Mohamed Montaser3:

New project.zip

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

<img class="w-100" src="images/hero.svg" alt="">

ان كانت الصورة تبدو كبيرة في الشاشات الكبيرة والمتوسطة يمكنك ضبط العرض عن طريق وضع الصورة ضمن حاو نحدد عرضه عن طريق قواعد نظام الشبكة في إطار العمل Bootstrap:

      <div class="row">
        <div class="col-12 text-center">
          <div class="text-box">
            <h1>Designer, Front-end Developer & Mentor</h1>
            <p>I design and code beautifully simple things, and I love what I do.</p>
            <img src="images/mf-avatar.svg" alt="">
          </div>
        </div>

        <div class="col-lg-6 col-sm-12 m-auto">
          <img class="w-100 m-auto" src="images/hero.svg" alt="">
        </div>
      </div>