CODEWITHSUNDEEP
javascripthtmlcss
Stuntman 82
Stuntman 82

Reputation: 15

Trying to change a div block width to screen width in javascript to get it to be responsive

I am trying to change the width of the div block named Title to the width of the screen using javascript, here is my code:

var Title = document.getElementsByClassName("Title");
var x = 10;

window.onload = function() {
  "use strict";
  while (x < 11) {
    Title.width = screen.width; /* trying to make the width of title the width of screen */
  }
};
  /*This is for the responsivness*/

@media screen and (min-width: 425px) and (max-width: 825px) {
  .Title {
    min-width: 624px;
    width: auto;
  }
  #img {
    display: none;
  }
  #img1 {
    display: none;
  }
  #sizing {
    float: none;
    width: 100%;
  }
  .Text {
    font-size: 30px;
    width: 100%;
  }
  .column {
    width: 25%;
  }
  /* The normal CSS Code */
  .Title {
    background-color: #00BADD;
    max-width: 100%;
    width: 1895px;
    content: "";
    display: table;
    clear: both;
  }
  .column {
    float: left;
    width: 24.3%;
    padding: 20px;
  }
<div class="Title">
  <div class="column">
    <img id="img" align="center" src="An image" alt="Team 7277">
  </div>
  <div class="column">
    <img id="img1" align="center" src="Another Image">
  </div>
  <div class="column" id="sizing">
    <h1 class="Text"> Something <br> Something</h1>
    <h2 class="Text"> Something</h2>
  </div>
  <div class="column">
    <div id="link">
      <a href="#" class="fa fa-facebook"></a>
      <a href="#" class="fa fa-twitter"></a>
      <a href="#" class="fa fa-instagram"></a>
      <a class="Sum" href="#">Something</a>
    </div>
  </div>
</div>

First block is Javascript, second block is CSS, third block is my HTML. What i am trying to do is, when the width of the screen is below 825px and is still above 425px, make the Title the following, since that did not work, for some reason the width of the Title was always smaller than the screen.

Then i made the Javascript to make the width of the Title the same as the width of the screen.

I am a beginner in creating websites, so any help and advice would be appreciated.

Upvotes: 0

Views: 290

Answers (2)

Stuntman 82
Stuntman 82

Reputation: 15

As Titus said, I had to remove the Body Margin and make the width 100%. This fixed the problem

Upvotes: 0

Amir Makram
Amir Makram

Reputation: 12988

I think you maybe can doing it without js, only CSS if you make the width in percentage like width: 95%; and you can make use specific rules for each screen using media queries

you can check more about media queries from here

Upvotes: 0

Related Questions