Home > Net >  Text is not taking up full screen when on mobile device
Text is not taking up full screen when on mobile device

Time：09-08

So I have my personal website and I have paragraphs within it. When viewed on a large screen it looks fine however on a phone it is in a single column and I would like to fix that. I have a screen shot with what I mean and a code pen with the code. I have tried using @media screen and (mad-width:) however it does not help.

@media only screen and (max-width: 500px) {
  .masthead {
    padding: 3em 0;
  }
  @media screen and (max-width: 600px) {
    .column-left {
      display: none;
    }
  }
  @media screen and (max-width: 1800px) {
    .button {
      display: none;
    }
  }
  .masthead-heading {
    font-size: 3em;
  }
  .content-footer {
    padding: 2em 2.5em;
  }
}

.about,
.about-content,
.skills,
.skills-content,
.title::after,
.text {
  color: white;
}

.navbar {
  background-color: #ac5fdb;
  color-scheme: 100%;
}

.content-footer {
  padding: 2px 0;
  text-align: center;
  background-color: #ac5fdb;
  color-scheme: 100%;
  text-decoration: none;
  max-height: 2000px;
}

.footer-text {
  padding-bottom: 70px;
}

.content-footer>p {
  color: grey;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
  background-color: #1e2029;
}


/* custom scroll bar */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}


/* all similar content styling codes */

section {
  padding: 100px 0;
}

.max-width {
  max-width: 1300px;
  padding: 0 80px;
  margin: auto;
}

.about,
.services,
.skills,
.teams,
.contact,
footer {
  font-family: "Poppins", sans-serif;
}

.about .about-content,
.services .serv-content,
.skills .skills-content,
.contact .contact-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

section .title {
  position: relative;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 60px;
  padding-bottom: 20px;
  font-family: "Ubuntu", sans-serif;
}

section .title::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 180px;
  height: 3px;
  background: #1e2029;
  transform: translateX(-50%);
}

section .title::after {
  position: absolute;
  bottom: -8px;
  left: 50%;
  font-size: 20px;
  color: #ac5fdb;
  padding: 0 5px;
  background: #1e2029;
  transform: translateX(-50%);
}


/* navbar styling */

.nav-link {
  color: #fff;
}

.navbar {
  position: fixed;
  width: 100%;
  z-index: 999;
  padding: 30px 0;
  font-family: "Ubuntu", sans-serif;
  transition: all 0.3s ease;
}

.navbar.sticky {
  padding: 15px 0;
  background: #ac5fdb;
}

.navbar .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo a {
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}

.navbar .logo a span {
  color: #ac5fdb;
  transition: all 0.3s ease;
}

.navbar.sticky .logo a span {
  color: #fff;
}

.navbar .menu li {
  list-style: none;
  display: inline-block;
}

.navbar .menu li a {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}

.navbar .menu li a:hover {
  color: #ac5fdb;
}

.navbar.sticky .menu li a:hover {
  color: #ffff;
}


/* menu btn styling */

.menu-btn {
  color: #fff;
  font-size: 23px;
  cursor: pointer;
  display: none;
}

.scroll-up-btn {
  position: fixed;
  height: 45px;
  width: 42px;
  background: #ac5fdb;
  right: 30px;
  bottom: 10px;
  text-align: center;
  line-height: 45px;
  color: #fff;
  z-index: 9999;
  font-size: 30px;
  border-radius: 6px;
  border-bottom-width: 2px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.scroll-up-btn.show {
  bottom: 30px;
  opacity: 1;
  pointer-events: auto;
}

.scroll-up-btn:hover {
  filter: brightness(90%);
}


/* home section styling */

.home {
  display: flex;
  background: url("/Files/banner.jpg");
  height: 90vh;
  color: #fff;
  min-height: 90vh;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Ubuntu", sans-serif;
}

.home .max-width {
  width: 100%;
  display: flex;
}

.home .max-width .row {
  margin-right: 0;
}

.home .home-content .text-1 {
  font-size: 27px;
}

.home .home-content .text-2 {
  font-size: 75px;
  font-weight: 600;
  margin-left: -3px;
}

.home .home-content .text-3 {
  font-size: 40px;
  margin: 5px 0;
}

.home .home-content .text-3 span {
  color: #ac5fdb;
  font-weight: 500;
}

.home .home-content a {
  display: inline-block;
  background: #ac5fdb;
  color: #fff;
  font-size: 25px;
  padding: 12px 36px;
  margin-top: 20px;
  font-weight: 400;
  border-radius: 6px;
  border: 2px solid #ac5fdb;
  transition: all 0.3s ease;
}

.home .home-content a:hover {
  color: #ac5fdb;
  background: none;
}


/* about section styling */

.about .title::after {
  content: "who I am";
}

.about .about-content .left {
  width: 45%;
}

.about .about-content .column-left img {
  height: 400px;
  width: 400px;
  object-fit: cover;
  border-radius: 6px;
}

.about .about-content .right {
  width: 55%;
}

.about .about-content .right .text {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 10px;
}

.about .about-content .right .text span {
  color: #ac5fdb;
}

.about .about-content .right p {
  text-align: justify;
}

.about .about-content .right a {
  display: inline-block;
  background: #ac5fdb;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  padding: 10px 30px;
  margin-top: 20px;
  border-radius: 6px;
  border: 2px solid #ac5fdb;
  transition: all 0.3s ease;
}

.about .about-content .right a:hover {
  color: #ac5fdb;
  background: none;
}


/* skills section styling */

.skills .title::after {
  content: "what i know";
}

.skills .skills-content .column {
  width: calc(50% - 30px);
}

.skills .skills-content .left .text {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.skills .skills-content .left p {
  text-align: justify;
}

.skills .skills-content .left a {
  display: inline-block;
  background: #ac5fdb;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 16px;
  margin-top: 20px;
  border-radius: 6px;
  border: 2px solid #ac5fdb;
  transition: all 0.3s ease;
}

.skills .skills-content .left a:hover {
  color: #ac5fdb;
  background: none;
}

.skills .skills-content .right .bars {
  margin-bottom: 15px;
}

.skills .skills-content .right .info {
  display: flex;
  margin-bottom: 5px;
  align-items: center;
  justify-content: space-between;
}

.skills .skills-content .right span {
  font-weight: 500;
  font-size: 18px;
}

.skills .skills-content .right .line {
  height: 5px;
  width: 100%;
  background: lightgrey;
  position: relative;
}

.skills .skills-content .right .line::before {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  background: #ac5fdb;
}

.skills-content .right .html::before {
  width: 100%;
}

.skills-content .right .css::before {
  width: 90%;
}

.skills-content .right .js::before {
  width: 75%;
}

.skills-content .right .php::before {
  width: 70%;
}

.skills-content .right .mysql::before {
  width: 50%;
}


/* services section styling */

.contact {
  background-color: #1e2029;
}

.title,
.head,
.text {
  color: #fff;
}

.services,
.teams {
  color: #fff;
  background-color: #1e2029;
}

.services .title::before,
.teams .title::before {
  background-color: #1e2029;
  color: #ffff;
}

.services .title::after,
.teams .title::after {
  background: #111;
  content: "what I've made";
}

.services .serv-content .card {
  width: calc(33% - 20px);
  background: #222;
  text-align: center;
  border-radius: 6px;
  padding: 50px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.services .serv-content .card:hover {
  background: #ac5fdb;
}

.services .serv-content .card .box {
  transition: all 0.3s ease;
}

.services .serv-content .card:hover .box {
  transform: scale(1.05);
}

.services .serv-content .card i {
  font-size: 50px;
  color: #ac5fdb;
  transition: color 0.3s ease;
}

.services .serv-content .card:hover i {
  color: #fff;
}

.services .serv-content .card .text {
  font-size: 25px;
  font-weight: 500;
  margin: 10px 0 7px 0;
}


/* contact section styling */

.contact .title::after {
  content: "get in touch";
}

.contact .contact-content .column {
  width: calc(50% - 30px);
}

.contact .contact-content .text {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.contact .contact-content .left p {
  text-align: justify;
}

.contact .contact-content .left .icons {
  margin: 10px 0;
}

.contact .contact-content .row {
  display: flex;
  height: 15px;
  align-items: center;
}

.contact .contact-content .row .info {
  margin-left: 30px;
  background-color: #1e2029;
}

.contact .contact-content .row i {
  font-size: 25px;
  color: #ac5fdb;
}

.contact .contact-content .info .head {
  font-weight: 500;
}

.contact .contact-content .info .sub-title {
  color: #fff;
  background-color: #1e2029;
}

.contact .right form .fields {
  display: flex;
  background-color: #1e2029;
}

.contact .right form .field,
.contact .right form .fields .field {
  height: 45px;
  width: 100%;
  margin-bottom: 15px;
  background-color: #1e2029;
}

.contact .right form .textarea {
  height: 80px;
  width: 100%;
  background-color: #1e2029;
}

.contact .right form .name {
  margin-right: 10px;
  background-color: #1e2029;
}

.contact .right form .field input,
.contact .right form .textarea textarea {
  height: 70%;
  width: 100%;
  border: 1px solid lightgrey;
  border-radius: 6px;
  outline: none;
  padding: 0 15px;
  font-size: 17px;
  font-family: "Poppins", sans-serif;
  transition: all 0.3s ease;
  background-color: #1e2029;
}

.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus {
  border-color: #b3b3b3;
  background-color: #1e2029;
}

.contact .right form .textarea textarea {
  padding-top: 10px;
  resize: none;
  background-color: #1e2029;
}

.contact .right form .button-area {
  display: flex;
  align-items: center;
  background-color: #1e2029;
}

.right form .button-area button {
  color: #fff;
  display: block;
  width: 160px !important;
  height: 45px;
  outline: none;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  flex-wrap: nowrap;
  background: #ac5fdb;
  border: 2px solid #ac5fdb;
  transition: all 0.3s ease;
}

.right form .button-area button:hover {
  color: #ac5fdb;
  background: none;
}

.fa-twitter,
.fa-github,
.fa-linkedin {
  color: white;
}

.navbar-toggler-icon {
  color: #ac5fdb;
}

.about,
.skills {
  background-color: #1e2029;
}

@media (max-width: 991px) {
  .services .max-width {
    padding: 0;
  }
  .services .serv-content,
  .services .serv-content .card {
    width: 100%;
  }
}
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="./style.css" />
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <script src="https://kit.fontawesome.com/3263ba6030.js" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/3263ba6030.js" crossorigin="anonymous"></script>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <title>Edward Wynman</title>
  <link rel="icon" type="image/x-icon" href="Files/PFP.jpg">
</head>
<nav >
  <div >
    <a  href="index.html">Edward Wynman</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarNav">
      <ul >
        <li >
          <a  aria-current="page" href="index.html">Home</a>
        </li>
        <li >
          <a  href="about.html">About</a>
        </li>
        <li >
          <a  href="courses.html">Courses</a>
        </li>
        <li >
          <a  href="projects.html">Projects</a>
          <li >
            <a  href="/Files/Resume.pdf">Resume</a>
          </li>
      </ul>
    </div>
  </div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>


<body>
  <section >
    <div >
      <section  id="home">
        <div >
          <div >

            <div >Hello, my name is</div>
            <div >Edward Wynman</div>
            <div >And I'm a <span >
                <script>
                  $(document).ready(function () {
                    // typing text animation script
                    var typed = new Typed(".typing", {
                      strings: ["Student", "Developer", "Engineer"],
                      typeSpeed: 100,
                      backSpeed: 60,
                      loop: true
                    });
                    var typed = new Typed(".typing-2", {
                      strings: ["Student", "Developer", "Engineer"],
                      typeSpeed: 100,
                      backSpeed: 60,
                      loop: true
                    });
                  });
                </script>
              </span></div>
            <a href="mailto:[email protected]">Email Me!</a>
          </div>
        </div>
      </section>
  </section>

  <section  id="about">
    <div >
      <h2 >About me</h2>
      <div >
        <div  id="pic">
          <img src="/Files/PFP.jpg" alt="">
        </div>
        <div >
          <div >I'm Eddie and I'm a <span ></span></div>
          <p>At the age of <strong>thirteen</strong> I started programming and have taught myself a thing or two since then. Topics that interest me are <strong>web development,
              UX Design , and Software Engineering </strong>Now, I'm a Computer Science student at
            <strong> Montclair State University </strong>. I am currently seeking 2023 Summer internship opportunities in Software Engineering and Web Development. I am also pursuing a minor in <strong>Data Science</strong> This website showcases some
            of <strong>my
              abilities and skills.</strong>
          </p>
          <a href="/Files/Resume.pdf">Download Resume</a>
          <a href="about.html">Read More</a>
        </div>
      </div>
    </div>
  </section>


  <section  id="skills">
    <div >
      <h2 >My skills</h2>
      <div >
        <div >
          <div >My Skills</div>
          <p>Over the years I have taken a lot from the classes I have taken and they have led me to a specfic set of skills. I am proficcient in Java, Python, C, JavaScript, HTML, CSS, PHP, Adobe Creative Suite Apps, and I am proficcient in MS Office products
            as well.
          </p>
          <a href="about.html">Read more</a>

        </div>
        <div >
          <div >
            <div >
              <span>Java</span>
              <span>100%</span>
            </div>
            <div ></div>
          </div>
          <div >
            <div >
              <span>Python</span>
              <span>90%</span>
            </div>
            <div ></div>
          </div>
          <div >
            <div >
              <span>JavaScript</span>
              <span>80%</span>
            </div>
            <div ></div>
          </div>
          <div >
            <div >
              <span>HTML | CSS </span>
              <span>70%</span>
            </div>
            <div ></div>
          </div>
          <div >
            <div >
              <span>PHP</span>
              <span>50%</span>
            </div>
            <div ></div>
          </div>
        </div>
      </div>
    </div>
  </section>
  </div>

  <footer >
    <section >
      <strong>Say hi to me on these social networks:</strong>
    </section>
    <ul >
      <a href="https://twitter.com/EddieWynman?lang=en" target="_blank"><i ></i></a>
      <a href="https://github.com/Ewynman" target="_blank"><i ></i></a>
      <a href="https://www.linkedin.com/in/edward-wynman/" target="_blank"><i
          ></i></a>
    </ul>
  </footer>

</body>

CodePudding user response：

You need to remove the width: 50%; on .about .about-content .right using a media query. The reason it's rendering like that is that it's using 50% of the available space on mobile, which is not much.

Could look something like this:

@media only screen and (max-width: 800px) {
    .about .about-content .right {
        width: 100%;
    }
}

CodePudding user response：

Here you go...

Add the following:

@media only screen and (max-width: 768px) {
    .about .about-content .right {
        width: 100% !important;
    }
}

CodePudding user response：

Hey in your codepen you made a mistake. The max-width needs to go from wider screens to smaller ones and not the oposite way, because, as the lower value in the page will always overwrite the further up ones, your media queries will never be met.

Put the max-width media queries at the end of the css or at least after the element you want to have a different style on smaller screens. Then start with the highest number (max-width="1800px") and end with the lowest one (max-width="500px").

so:

    //default (bigger than 993px)
    .class {
        font-size: 10px;
    }
    //992px and smaller
    @media screen and (max-width:992px){
        .class {
            font-size: 20px;
        }
    }
    //767px and smaller
    @media screen and (max-width:767px){
            .class {
                font-size: 24px;
            }
    }
    //600px and smaller
    @media screen and (max-width:600px){
            .class {
                font-size: 32px;
            }
    }

Page link：https//www.codepudding.com/net/537083.html

Prev:How to position the angular material tabs edge to edge inside the angular material dialog in mobile
Next:Stop Input From Inheriting Another Input's Value On Button Click
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding