Responsive Text in html/css

See also questions close to this topic

• loading different content on single Html page with the use of JavaScript

  I am very new to HTML, CSS and JavaScript and designing a web site that is a text-based game. I have attached an example http://monsterbreeder.com/ my question is I want multiple different pages loaded on a single HTML document without changing the URL of the page with the help of JavaScript. I want some recommendations of tutorials or videos which might help me understand how it is implemented,

  Any help will be appreciated

  thank you
• How Can I Update the property of an object based on another one updated at the same time - zustand?

  I have a product and i want to get the total price of this product based on quantity, I'm using zustand for state management.

  here's a function I used to update the state.

  export const useCartProduct = create<CartProductsProp>(
    devtools(
      persist(
         (set) => ({
           incrementProductQuantity: (product: ProductProps) => {
            set((prev) => {
              console.log('@userQuantity-product', product.userQuantity);
              let currentCart = prev.cartProducts.map((cartProduct) =>
                cartProduct.id === product.id
                  ? {
                      ...cartProduct,
                      userQuantity: cartProduct.userQuantity + 1,
                      productTotalPrice: cartProduct.userQuantity * cartProduct.price, // here's the issue "the userQuantity not updated and return the prev value".
                    }
                  : cartProduct,
              );
              return {
                cartProducts: currentCart,
              };
            });
          },
        }),
      ),
    ),
  );
  

  the issue here

    productTotalPrice: cartProduct.userQuantity * cartProduct.price
  

  "the userQuantity not updated and return the prev value".

  So what I tried is like this

    productTotalPrice: (cartProduct.userQuantity + 1) * cartProduct.price,
  

  that's return the correct quantity 'updated one', So is others way to fix it?
• How to use enter to append my <li> element to my list?

  So right now I have a working to-do list where in order to add a list item, you have to click a button. I wish to also allow the user to hit "enter" in order to do the same thing as the button.

  Below is the js code I used to create a new li element and append it to my list.

  function newElement(){
      var li = document.createElement('li');
      var inputValue = document.getElementById("myInput").value;
      li.appendChild(document.createTextNode(inputValue));
          if (inputValue === '') {
          alert("You must write something!");
        } else {
          document.getElementById("list").appendChild(li);
        }
  
      document.getElementById("myInput").value = "";
  

  This is my HTML code for the button that runs the newElement() function above.

  <input type ="text" id="myInput"  placeholder="Type Task Here" >
          <button class="submitButton" type="button" onclick="newElement()">Add To List</button>
  
• Problem in inserting data into the mysql database with the post method

  I am working on a project that inserts a text string into a database. I'm trying to use the post method, but when I click the submit button, the page reloads but nothing happens and the database is empty.

  Could you help me to solve this problem? then to send to the db the string taken as input by the field:

  <input type="text" name="bottle" placeholder="Type a message">
  

  index.php:

  <?php
      if(isset($_POST['save'])){
          $sql = "INSERT INTO messages (text)
          VALUES (?)";
          $stmt = mysqli_prepare($sql);
          $stmt->bind_param("sss", $_POST['messages']);
          $stmt->execute();
      }
  
      ?>
    <!-- Modal content -->
    <div class="modal-content">
      <span class="close">&times;</span>
      <form action="index.php" method="post" align="center"> 
        <input type="text" name="bottle" placeholder="Type a message">
      <br><button type="submit" name="save" class="w3-btn w3-white w3-border w3-border-brown w3-round">Send</button>
    </form>
    <div class="topnav" id="myTopnav">
    </div>
  
  </div>  
  

  connection.php:

  <?php
      //Sample Database Connection Syntax for PHP and MySQL.
      
      //Connect To Database
      
      $hostname="localhost";
      $username="root";
      $password="";
      $dbname="bottles";
  //  $usertable="your_tablename";
      
      mysqli_connect($hostname,$username, $password, $dbname) or die ("html>script language='JavaScript'>alert('Unable to connect to database! Please try again later.'),history.go(-1)/script>/html>");
      //mysqli_select_db($dbname);
      
      # Check If Record Exists
      
      /*$query = "SELECT * FROM $usertable";
      
      $result = mysqli_query($query);
      
      if($result){
          while($row = mysqli_fetch_array($result)){
              $name = $row["$yourfield"];
              echo "Name: ".$name."br/>";
          }
      }
      */
  ?>
  
• Get Array of All Existing Page Routes in Gatsby

  I'm making a 404 page in Gatsby and I want to give the user a suggestion for a similar path name based on the path they have gone to (which doesn't exist). How do I get an array of all the existing pages in my website?
• How do I update fixed h1 title and trigger animations for each slide that scrolls into and out of view?

  New developer here, I am currently working on a webpage that has horizontal scrolling slider content. I need to dynamically update the fixed h1 tag above the .slide-content on the page (and trigger the text animation ".FlyInBottom"/".FlyOutBottom" when the slide-content is coming into view, and going out of view) with each of the slides titles. Are there any straightforward ways to do this? I'm at a loss! I've included an image of the site I'm working on below and the code I'm working with:

  Layout

     <span class="block">
      <div class="slide-title">
        <h1 class="cssanimation sequence FlyInBottom" data-change="Test">Project Test</h1>
      </div>
    </span>
    <div class="r-wrapper center">
      <section class="slide-content" id="slide-1" data-change="Axis Lighting">
        <div class="slide" id="slide-1">
          <img class="img-fluid" src="/images/Axis-Homepage-Web.png"/>
        </div>
      </section>
      <section class="slide-content" id="slide-2" data-change="JLG 50th">
        <div class="slide">
          <img class="img-fluid" src="/images/JLG50th-Web.png"/>
        </div>
      </section>
     </div>
  

  @keyframes FlyInBottom {
      0% {
          transform: translate(0, 70px);
          opacity: 1;
          visibility: visible;
      }
      50% {
          transform: translate(0, -30px);
          animation-timing-function: ease;
      }
      100% {
          visibility: visible; 
      }
  }
  .FlyOutBottom span { animation-name: FlyOutBottom }
  @keyframes FlyOutBottom {
      0% {
          transform: translate(0, 0);
          visibility: visible;
      }
      50% {
          transform: translate(0, 70px);
          animation-timing-function: ease;
      }
      100% {
          transform: translate(0, 70px);
          visibility: hidden;
      }
  }
  
• Show dynamic iterated items in bootstrap popover in time intervals

  I have this code for my bootstrap popover

  <% lists = ["c", "w", "d"] %>
  <% lists.shuffle.each do | list | %>
    <a href='#' id='example' rel='popover' data-animation="true" data-placement='right' data-content='<%= list %>' title='Twitter Bootstrap Popover'></a>
  <% end %>
  
  <script type="text/javascript">
    $('#example').popover({
    'placement': 'auto',
    'template': '<div class="popover" role="tooltip"><div class="arrow"></div><span class="btn btn-link float-right pop-close">x</span><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
  }).popover('show');
  
  $('.pop-close').click(function() {
      $('#example').popover('hide');
  });
  </script>
  

  In the popover data-content section, I will like to display a different content from the lists array after every x number of seconds ( for example 5 seconds). Now I can only achieve this by manually refreshing the page. How do I display a different content after a number of seconds without having to manually refresh the page?
• How can I make a data array from a table with jQuery?

  I have a form.

  <form id="form_step" action="form_stepb.php" method="post">
  

  I have a table. Let's say it looks like this:

  <table class="data_table">
      <tr>
          <th>Header One:</th>
          <th>Header Two:</th>
          <th>Header Three:</th>
          <th>Header Four:</th>
      </tr>
      <tr class="data_subrow">
          <td>
              <select class="subrow_type">
                  <option value="choice_a">Choice A</option>
                  <option value="choice_b">Choice B</option>
              </select>
          </td>
          <td><input type="text" class="phone" value=""> </td>
          <td><input type="text" class="phone_two" value=""></td>
          <td><input type="text" class="email" value=""></td>
      </tr>
  </table>
  

  Let's say the table has the ability to add a cloned row to the bottom of the table. So you could have 2,3,4 rows and so on when submitted.

  Before I submit the form, I want to go through each row, gather the data, and make an array that gets turned into JSON, so the database holds the JSON for the data table in it.

  I'm trying to do it like this:

  $('#form_step').submit(function() {
      $('.data_table > tr.data_subrow').each(function() {
               
      });
  });
  
  

  I've been reading, searching, etc. But I need to know how I would take the values from each row (selected on the dropdown, text from the inputs) and make each row part of the array/object.

  Can someone give me some direction on this?
• Zooming in and out in Canvas2d HTML5 doesn't work

  I have a Canvas2d where I play a video, by drawing each frame on the canvas while the video is playing. This is how the function for playing the video looks like:

  function videoPlay() {
     socket = io();
     var timer_var = setInterval(myTimer, 10000);
     socket.on('start', function () {
       var canvasVideo = document.getElementById('canvas1');
       var ctxVideo = canvasVideo.getContext("2d");
       var streamingSource = parseInt("<%= Streaming_Source %>");
       divSocket = io(location.origin + "/cam" + streamingSource);
       divSocket.on('data', function (data) {
         var bytes = new Uint8Array(data);
         var blob = new Blob([bytes], {type: 'application/octet-binary'});
         var url = URL.createObjectURL(blob);
         var img = new Image;
         img.onload = function () {
            URL.revokeObjectURL(url);
            ctxVideo.drawImage(img, 0, 0, canvasVideo.width, canvasVideo.height);
          };
        img.src = url;
     }
   }
  }
  

  This is my HTML:

  <div class="div_2_1_canvas">
     <canvas id='canvas2' width='920' height='680' class="w-100" style='position:relative'> 
     </canvas>
     <div class="zoom-buttons">
       <input type="button" id="plus" value="+" style="width: 35px; height: 35px; position: absolute; left: 75%; bottom: 43%; border-radius: 50%; border: 1px solid white; background-color: white; text-align: center;"></input>
    
       <input type="button" id="minus" value="-"style="width: 35px; height: 35px; position: absolute; left: 75%; bottom: 40%; border-radius: 50%; border: 1px solid white; background-color: white">
     </div>
  </div>
  

  And finally, this is how my zooming/scaling functions look like:

  var scale = 1.0;
  var scaleMultiplier = 0.8;
  
  var translatePos = {
      x: canvasVideo.width / 2,
      y: canvasVideo.height / 2
  };
                          
  document.getElementById("plus").addEventListener("click", function (e) {
    scale /= scaleMultiplier;
    var canvasVideo = document.getElementById('canvas1');
    var ctxVideo = canvasVideo.getContext("2d");
    ctxVideo.translate(translatePos.x, translatePos.y);
    ctxVideo.scale(scale, scale);
  }, false);
                          
  document.getElementById("minus").addEventListener("click", function () {
     scale *= scaleMultiplier;
     var canvasVideo = document.getElementById('canvas1');
     var ctxVideo = canvasVideo.getContext("2d");
     ctxVideo.translate(translatePos.x, translatePos.y);
     ctxVideo.scale(scale, scale)
  }, false);                       
  
  

  It works fine when zooming in, but when I zoom out and the value of the scale becomes less than 0.5 the video gets messed up and looks like this:

  Any idea why this is happening and how I can fix it?
• CSS: flexbox image: limit height, not overflow other contents, but maximize size, and preserve aspect ratio

  Flexbox is good. But one problem bothers me.
  Can flexbox deal with images of arbitrary aspect ratio?

  I want to limit the height of a flexbox, don't make contents overflow because of image being too big, but still, try to maximize the image, and preserve aspect ratio at the same time.
  Is this possible? Or there's a better way to do it?

  Correct me if I'm just too picky. Maybe we just don't have to consider arbitrary aspect ratio when designing web pages? Taking care of wide images & long images at the same time?

  Here's an example:

  html, body {
      height: 100%;
  }
  body, p {
      margin: 0;
  }
  main {
      display: flex;
      flex-direction: column;
  
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  .row {
      display: flex;
      max-height: 25%;
      border: 1px solid red;
  }
  .img_wrapper {
      display: flex;
      align-items: center;
      justify-content: center;    
  }
  .img_wrapper > img {
      max-height: 100%;
      max-width: 100%;
  }
  .info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 0 0 auto;
  }

  <main>
      <div class="row">
          <div class="img_wrapper">
              <img src="https://via.placeholder.com/50x50.png">
          </div>
          <div class="info">
              <b>Title</b>
              <p>More info</p>
          </div>
      </div>
      <div class="row">
          <div class="img_wrapper">
              <img src="https://via.placeholder.com/3000x600.png">
          </div>
          <div class="info">
              <b>Title</b>
              <p>More info</p>
          </div>
      </div>
      <div class="row">
          <div class="img_wrapper">
              <img src="https://via.placeholder.com/600x1800.png">
          </div>
          <div class="info">
              <b>Title</b>
              <p>More info</p>
          </div>
      </div>
  </main>

  This is the result of the above html+css:

  

  I'm trying to eliminate those white gaps between words & images, that is, "push" image and those words to the leftmost side.
  This already works pretty fine when the image is square or not very extreme. Any idea?
• Css "width:fit-content;" property doesn't work well. Parent element has this property calculates its width smaller than its content

  I am working on a clone project and I have encountered a problem at "width:fit-content" concept. First you should look the following image and I am going to give you related html and css codes with image.

  Parent Element And Childs

  As you see at the image, purple is parent element has 8px padding and "width:fit-content" property. The parent has span and div elements inside. Orange one is span element and has 15px width. Red one is div element and has 45.984px width. Pink ones are spans contains texts inside and these are defines width of parents.

  All these means total width of inside of parent without its padding is 15px(span) +3px(padding-left) +45.984px(div) = 63.984px. The problem is that, despite all these parent has 48.984px width and that causes the div element is wrapped which I dont want to be happened (As I said parent has "width:fit-content;" property). This problem occurs because of next div sibling element of this purple parent element. Next div element only has width:100% property and if I change width property to 200px(this width value must not exceed width of browser viewport), Content of parent element does not wrap and works well. Problem can be seen via code below.

  Html File Includes Problem

  ---

  Note: Width calculation given above different from example code below because of font styles. I used special font in my original code but the problem still occurs at the example code below.

  <!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">
      <title>Document</title>
      <style>
          *,
          *::after,
          *::before {
              box-sizing: border-box;
          }
  
          /*header is parent of all elements*/
          header {
              display: flex;
              flex-direction: row;
              background-color: gray;
          }
  
          /*Parent element which is shown as purple at the example image above*/
          /*Problem occurs at this element*/
          .parent-div {
              padding: 0 8px;
              width: fit-content;
              background-color: purple;
          }
  
          /*Span element inside parent*/
          .child-span {
              display: inline-block;
              background-image: url("/assets/icons/location.png");/*icon image*/
              width: 15px;
              height: 16px;
              margin-top: 22px;
              background-color: orange;
          }
  
          .child-div {
              float: right;
              padding-left: 3px;
              margin-top: 15px;
              background-color: red;
          }
  
          .next-sibling-div {
              width: 100%;
              background-color: blue;
          }
      </style>
  </head>
  
  <body>
      <header>
  
          <div class="parent-div">
              <span class="child-span"></span>
              <div class="child-div">
                  <span>Span1</span>
                  <span>Span2</span>
              </div>
          </div>
          <div class="next-sibling-div">
          </div>
      </header>
  </body>
  
  </html>
  

  How to show up the problem ?

  Change width property of next-sibling-div to small pixel sized width or delete the div element has next-sibling-div class. After that, watch changing of div element has parent-div class.After that, You will see red div inside purple will be at the same line with orange span element.

  As a conclusion, I want orange span and red div element inside purple parent element at the same line but width of purple parent element has not to be fixed size because its content will be changed at the client side so it may be longer than that fixed size and it has to be same width with its content. And also next sibling has to have 100% width property because this part will be responsive.
• Centre aligning elements with CSS flex

  I've set up my code using flex so that it works responsively (it's looking how I'd like on devices sub 960 in width so any changes to desktop happen within the css query at the bottom of my CSS file). potentially a very simple question but on views wider than 960 the 8 tiles aren't a consistent width (one .row containing 4 .tiles) - I tried adding a width of 25% which I thought would make them always evenly span the width of the page but that didn't work. Within that the .content (expanding content) seems to extend further that the row to the right which I cant understand?

  any ideas would be really appreciated!

  working fiddle: https://jsfiddle.net/simoncunningham/zsLxuo26/7/

  any advice would appreciated!

  <div class="box">
        <div class="tile" onclick="openTab('b1');">
          <img class="icon-spacing" src="./Icons/Banking.svg" />
          <p>Banking</p>
          <img class="arrow-down" src="./Icons/arrow-down.png" />
        </div>
        <div id="b1" class="content" style="display: none; background: black">
          <span onclick="this.parentElement.style.display='none'" class="closebtn"
            >&times;</span
          >
          <div class="description">
            <h3>Banking</h3>
            <p>
              The largest category covering investment and management platforms,
              sales and trading analysis toosl, personal finance management &
              crypto exchanges.
            </p>
            <ul>
              <li>Personal Finance Management (PFM)</li>
              <li>Investment Data and Information Services</li>
              <li>Trading and Investment Platforms</li>
              <li>WealthTech Operations</li>
              <li>Distributed Ledger Technologies & Cryptocurrencies</li>
              <li>Robo Advisors</li>
            </ul>
          </div>
        </div>
        <div class="tile" onclick="openTab('b2');">
          <img class="icon-spacing" src="./Icons/RegTech.svg" />
          <p>RegTech</p>
          <img class="arrow-down" src="./Icons/arrow-down.png" />
        </div>
        <div id="b2" class="content" style="display: none; background: black">
          <span onclick="this.parentElement.style.display='none'" class="closebtn"
            >&times;</span
          >
          <div class="description">
            <h3>RegTech</h3>
            <p>
              The largest category covering investment and management platforms,
              sales and trading analysis toosl, personal finance management &
              crypto exchanges.
            </p>
            <ul>
              <li>Personal Finance Management (PFM)</li>
              <li>Investment Data and Information Services</li>
              <li>Trading and Investment Platforms</li>
              <li>WealthTech Operations</li>
              <li>Distributed Ledger Technologies & Cryptocurrencies</li>
              <li>Robo Advisors</li>
            </ul>
          </div>
        </div>
        <div class="tile" onclick="openTab('b3');">
          <img class="icon-spacing" src="./Icons/InsurTech.svg" />
          <p>InsurTech</p>
          <img class="arrow-down" src="./Icons/arrow-down.png" />
        </div>
        <div id="b3" class="content" style="display: none; background: black">
          <span onclick="this.parentElement.style.display='none'" class="closebtn"
            >&times;</span
          >
          <div class="description">
            <h3>InsurTech</h3>
            <p>
              The largest category covering investment and management platforms,
              sales and trading analysis toosl, personal finance management &
              crypto exchanges.
            </p>
            <ul>
              <li>Personal Finance Management (PFM)</li>
              <li>Investment Data and Information Services</li>
              <li>Trading and Investment Platforms</li>
              <li>WealthTech Operations</li>
              <li>Distributed Ledger Technologies & Cryptocurrencies</li>
              <li>Robo Advisors</li>
            </ul>
          </div>
        </div>
        <div class="tile" onclick="openTab('b4');">
          <img class="icon-spacing" src="./Icons/Lending.svg" />
          <p>Lending</p>
          <img class="arrow-down" src="./Icons/arrow-down.png" />
        </div>
        <div id="b4" class="content" style="display: none; background: black">
          <span onclick="this.parentElement.style.display='none'" class="closebtn"
            >&times;</span
          >
          <div class="description">
            <h3>Lending</h3>
            <p>
              The largest category covering investment and management platforms,
              sales and trading analysis toosl, personal finance management &
              crypto exchanges.
            </p>
            <ul>
              <li>Personal Finance Management (PFM)</li>
              <li>Investment Data and Information Services</li>
              <li>Trading and Investment Platforms</li>
              <li>WealthTech Operations</li>
              <li>Distributed Ledger Technologies & Cryptocurrencies</li>
              <li>Robo Advisors</li>
            </ul>
          </div>
        </div>
      </div>
  
      <div class="box">
        <div class="tile" onclick="openTab('b5');">
          <img class="icon-spacing" src="./Icons/Accounting.svg" />
          <p>Accounting</p>
          <img class="arrow-down" src="./Icons/arrow-down.png" />
        </div>
        <div id="b5" class="content" style="display: none; background: black">
          <span onclick="this.parentElement.style.display='none'" class="closebtn"
            >&times;</span
          >
          <div class="description">
            <h3>Accounting</h3>
            <p>
              The largest category covering investment and management platforms,
              sales and trading analysis toosl, personal finance management &
              crypto exchanges.
            </p>
            <ul>
              <li>Personal Finance Management (PFM)</li>
              <li>Investment Data and Information Services</li>
              <li>Trading and Investment Platforms</li>
              <li>WealthTech Operations</li>
              <li>Distributed Ledger Technologies & Cryptocurrencies</li>
              <li>Robo Advisors</li>
            </ul>
          </div>
        </div>
        <div class="tile" onclick="openTab('b6');">
          <img class="icon-spacing" src="./Icons/Payments.svg" />
          <p>Payments</p>
          <img class="arrow-down" src="./Icons/arrow-down.png" />
        </div>
        <div id="b6" class="content" style="display: none; background: black">
          <span onclick="this.parentElement.style.display='none'" class="closebtn"
            >&times;</span
          >
          <div class="description">
            <h3>Payments</h3>
            <p>
              The largest category covering investment and management platforms,
              sales and trading analysis toosl, personal finance management &
              crypto exchanges.
            </p>
            <ul>
              <li>Personal Finance Management (PFM)</li>
              <li>Investment Data and Information Services</li>
              <li>Trading and Investment Platforms</li>
              <li>WealthTech Operations</li>
              <li>Distributed Ledger Technologies & Cryptocurrencies</li>
              <li>Robo Advisors</li>
            </ul>
          </div>
        </div>
        <div class="tile" onclick="openTab('b7');">
          <img class="icon-spacing" src="./Icons/Quote.svg" />
          <p>Quote</p>
          <img class="arrow-down" src="./Icons/arrow-down.png" />
        </div>
        <div id="b7" class="content" style="display: none; background: black">
          <span onclick="this.parentElement.style.display='none'" class="closebtn"
            >&times;</span
          >
          <div class="description">
            <h3>Quote</h3>
            <p>
              The largest category covering investment and management platforms,
              sales and trading analysis toosl, personal finance management &
              crypto exchanges.
            </p>
            <ul>
              <li>Personal Finance Management (PFM)</li>
              <li>Investment Data and Information Services</li>
              <li>Trading and Investment Platforms</li>
              <li>WealthTech Operations</li>
              <li>Distributed Ledger Technologies & Cryptocurrencies</li>
              <li>Robo Advisors</li>
            </ul>
          </div>
        </div>
        <div class="tile" onclick="openTab('b8');">
          <img class="icon-spacing" src="./Icons/WealthTech.svg" />
          <p>WealthTech</p>
          <img class="arrow-down" src="./Icons/arrow-down.png" />
        </div>
        <div id="b8" class="content" style="display: none; background: black">
          <span onclick="this.parentElement.style.display='none'" class="closebtn"
            >&times;</span
          >
          <div class="description">
            <h3>WealthTech</h3>
            <p>
              The largest category covering investment and management platforms,
              sales and trading analysis toosl, personal finance management &
              crypto exchanges.
            </p>
            <ul>
              <li>Personal Finance Management (PFM)</li>
              <li>Investment Data and Information Services</li>
              <li>Trading and Investment Platforms</li>
              <li>WealthTech Operations</li>
              <li>Distributed Ledger Technologies & Cryptocurrencies</li>
              <li>Robo Advisors</li>
            </ul>
          </div>
        </div>
      </div>
  

  body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  
  .tile {
    flex: 1 0 auto;
    order: 0;
  
    /* For visual only  */
    background-color: black;
    border: 1px solid grey;
    height: 150px;
    text-align: center;
    font-size: 16px;
    color: white;
    cursor: pointer;
  }
  
  .active-tile {
    flex: 1 0 auto;
    order: 0;
  
    /* For visual only  */
    text-align: center;
    border: 1px solid #000;
    background-color: green;
    height: 125px;
    cursor: pointer;
  }
  
  .content {
    order: 1;
    flex: 1 0 100%;
  
    /* For visual only  */
    padding: 20px;
    color: white;
    text-align: center;
    border: 1px solid #000;
    background-color: #228b22;
  }
  
  .description {
    text-align: left;
  }
  
  .icon-spacing {
    margin-top: 24px;
  }
  
  /* Clear floats after the tiles */
  .box:after {
    content: '';
    display: table;
    clear: both;
  }
  
  .closebtn {
    float: right;
    color: white;
    cursor: pointer;
  }
  
  .arrow-down {
    width: 25px;
    height: 25px;
  }
  
  .arrow-up {
    width: 25px;
    height: 25px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  
  /* 
    "Desktop" and above
   */
  @media (max-width: 961px) {
    .box {
      flex-direction: column;
    }
  
    .content {
      order: 0;
    }
  }
  
  

   function openTab(tabName) {
          var i, x;
          x = document.getElementsByClassName('content');
          for (i = 0; i < x.length; i++) {
            x[i].style.display = 'none';
          }
          document.getElementById(tabName).style.display = 'block';
  
          // Get all the tabs into a collection
          // (don't use .getElementsByClassName()!)
          let tabs = document.querySelectorAll('.tile');
  
          // Set up a click event handler on each of the tabs
          tabs.forEach(function (tab) {
            tab.addEventListener('click', function (event) {
              // Loop over all the tabs and remove the active class
              tabs.forEach(function (tab) {
                tab.classList.remove('active-tile');
                tab.children[2].classList.remove('arrow-up');
              });
  
              // Set the background of the clicked tab
              this.classList.add('active-tile');
              tab.children[2].classList.add('arrow-up');
            });
          });
        }
  
• Responsive div element same as background image?

  I got question about responsive designs. I got background image who I need to set as container background image. But I don't have idea how to do it. For example I tried this -

  .container {
      width: 100%;
      background: url("img/bg3.svg") no-repeat;
      background-size: 100%;
      overflow: hidden;
      height: 100%;
  }
  
  

  So far I tried this, if Im setting for example excat sizes for background on mobile height size will be too much. Any suggestions?