Text is not taking up full screen when on mobile device - Ubuntu

EdwardWynman
September 7, 2022
266 views
3 votes
4 Answers

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 class="navbar navbar-expand-lg navbar-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.html">Edward Wynman</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="courses.html">Courses</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="projects.html">Projects</a>
          <li class="nav-item">
            <a class="nav-link" 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 class="home">
    <div class="jumbotron text-center">
      <section class="home" id="home">
        <div class="max-width">
          <div class="home-content">

            <div class="text-1">Hello, my name is</div>
            <div class="text-2">Edward Wynman</div>
            <div class="text-3">And I'm a <span class="typing">
                <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 class="about" id="about">
    <div class="max-width">
      <h2 class="title">About me</h2>
      <div class="about-content">
        <div class="column-left" id="pic">
          <img src="/Files/PFP.jpg" alt="">
        </div>
        <div class="column right">
          <div class="text">I'm Eddie and I'm a <span class="typing-2"></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 class="skills" id="skills">
    <div class="max-width">
      <h2 class="title">My skills</h2>
      <div class="skills-content">
        <div class="column left">
          <div class="text">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 class="column right">
          <div class="bars">
            <div class="info">
              <span>Java</span>
              <span>100%</span>
            </div>
            <div class="line html"></div>
          </div>
          <div class="bars">
            <div class="info">
              <span>Python</span>
              <span>90%</span>
            </div>
            <div class="line css"></div>
          </div>
          <div class="bars">
            <div class="info">
              <span>JavaScript</span>
              <span>80%</span>
            </div>
            <div class="line js"></div>
          </div>
          <div class="bars">
            <div class="info">
              <span>HTML | CSS </span>
              <span>70%</span>
            </div>
            <div class="line php"></div>
          </div>
          <div class="bars">
            <div class="info">
              <span>PHP</span>
              <span>50%</span>
            </div>
            <div class="line mysql"></div>
          </div>
        </div>
      </div>
    </div>
  </section>
  </div>

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

</body>

Answers

- RokBenko
- September 7, 2022 at 4:47 pm
- 0 votes
0
Here you go…

Add the following:
```
@media only screen and (max-width: 768px) {
    .about .about-content .right {
        width: 100% !important;
    }
}
```
Login or Signup to reply.

- Kameron
- September 7, 2022 at 4:48 pm
- 0 votes
0
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%;
    }
}
```
Login or Signup to reply.

- Andreas
- September 7, 2022 at 5:05 pm
- 0 votes
0
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;
            }
    }
```
Login or Signup to reply.

- Dario
- September 8, 2022 at 8:27 am
- 0 votes
0
Just like Cervus and Kameron have pointed out
```
.about .about-content .right {width: 100%}
```
is your main fix, then the next issue is the padding left and right on your max-width class because of
```
box-sizing: border-box
```
it will render 100% and then remove 80px of space on either side. If viewed on a small device it will be removing to much of the available space for example on 320px wide screen half the available space would be removed.
```
.max-width {padding: 0 80px} 
```
Might be better being
```
.max-width {padding: 0 20px}
```
And then at a larger media query it can update to 80px when it fits.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Text is not taking up full screen when on mobile device – Ubuntu

Answers