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

منتصر احمد · 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>

فيما يلي توثيق نظام الشبكة في إطار العمل Bootstrap.

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

السؤال

منتصر احمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

منتصر احمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية