CODEWITHSUNDEEP
html
sara1934-hasbrown
sara1934-hasbrown

Reputation: 29

How to resize text for mobile responsiveness

I am trying to create my website and input a short animation of text sliding every 0.4 seconds to change to another text. It's like an image gallery, but just text instead. I put this html code together from ws3school hence, some of the code inside might not make sense but it still runs perfectly fine.

I do not know how to code and I am just trying to make sense of what I see, some of the code below may seem a little inappropriate or weird to be there, I'm just trying to make it all work.

The issue I have is that it is not mobile-friendly, so when I open the website on a smaller screen, the font size does not change accordingly. I think I managed to fix the border size but not the font size. Can someone help me?

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .div1 {
      max-width: 460px;
      height: 170px;
      padding: 40px;
      border: 1px solid black;
      text-align: center;
      font-size: 65px;
      font-family: courier;
    }
    /* On smaller screens, decrease text size */
    
    @media only screen and (max-width: 300px) {
      .text {
        max-font-size: 20px
      }
    }
  </style>
</head>

<body>

  <div class="div1">
    <div class="mySlides w3-container w3-xlarge w3-transparent">
      <p>marketer</p>
    </div>

    <div class="mySlides w3-container w3-xlarge w3-transparent">
      <p>creator</p>
    </div>

    <div class="mySlides w3-container w3-xlarge w3-transparent">
      <p>innovator</p>
    </div>

    <div class="mySlides w3-container w3-xlarge w3-transparent">
      <p>collaborator</p>
    </div>

    <script>
      var slideIndex = 0;
      carousel();

      function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
          x[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > x.length) {
          slideIndex = 1
        }
        x[slideIndex - 1].style.display = "block";
        setTimeout(carousel, 400);
      }
    </script>

</body>

</html>

Upvotes: 1

Views: 1397

Answers (4)

sara1934-hasbrown
sara1934-hasbrown

Reputation: 29

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  max-width: 460px;
  height: 170px;
  padding: 40px;
  border: 1px solid black;
  text-align: center;
  font-size: 65px;
  font-family: courier;
 }


  @media screen and (min-width: 601px) {
  div.example {
     font-size: 65px;
  }
 }

@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
</style>
</head>
<body>

<div class="example">
      <p>marketer</p>
    </div>

    <div class="example">
      <p>creator</p>
    </div>

    <div class="example">
      <p>innovator</p>
    </div>

    <div class="example">
      <p>collaborator</p>
    </div>
   </div>

<script>
var slideIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("example");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none"; 
  }
  slideIndex++;
  if (slideIndex > x.length) {slideIndex = 1} 
  x[slideIndex-1].style.display = "block"; 
  setTimeout(carousel, 400); 
}
</script>

</body>
</html>

Upvotes: 1

Duncan Leung
Duncan Leung

Reputation: 152

Try this code: 

var slideIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {
    slideIndex = 1
  }
  x[slideIndex - 1].style.display = "block";
  setTimeout(carousel, 400);
}
.div1 {
  max-width: 460px;
  height: 170px;
  padding: 40px;
  border: 1px solid black;
  text-align: center;
  font-size: 65px;
  font-family: courier;
}

@media screen and (max-width: 300px) {
  .div1 p {
    font-size: 20px
  }
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="div1">
    <div class="mySlides">
      <p>marketer</p>
    </div>

    <div class="mySlides">
      <p>creator</p>
    </div>

    <div class="mySlides">
      <p>innovator</p>
    </div>

    <div class="mySlides">
      <p>collaborator</p>
    </div>
  </div>
</body>

</html>

Upvotes: 0

Dokksen
Dokksen

Reputation: 430

You can use relative size like vw to make it responsive. In combination with calc you can say that minimal font size should be for example 20px and for bigger screens it should be bigger thanks the vw unit.

font-size: calc(20px + 0.4vw);

You can use this outside the media query.

Upvotes: 0

Cargill Seiveright
Cargill Seiveright

Reputation: 31

Try:

@media only screen and (max-width: 300px) {
    .div1 {
        font-size: 20px;
    }
}

Upvotes: 3

Related Questions