CODEWITHSUNDEEP
javascripthtmlcssresponsive-designmodalpopup
Shrutika Dorugade
Shrutika Dorugade

Reputation: 323

How to achieve full responsiveness?

I have designed one HTML page which has four sections and also there is modal pop up feature. I have tried a lot to achieve responsiveness but I am not understanding how to make it. Somehow I achieved for tablet view but again while making window tab small and big it is not looking proper also the content is not looking proper in modal pop up. Please give me some idea to achieve this. Below is my code

var modal1 = document.getElementById("myModal1");

// Get the button that opens the modal1
var btn1 = document.getElementById("btn1");

// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];

var modal2 = document.getElementById("myModal2");

// Get the button that opens the modal2
var btn2 = document.getElementById("btn2");

// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];

var modal3 = document.getElementById("myModal3");

// Get the button that opens the modal3
var btn3 = document.getElementById("btn3");

// Get the <span> element that closes the modal3
var span3 = document.getElementsByClassName("close3")[0];

var modal4 = document.getElementById("myModal4");

// Get the button that opens the modal4
var btn4 = document.getElementById("btn4");

// Get the <span> element that closes the modal4
var span4 = document.getElementsByClassName("close4")[0];



// When the user clicks the button, open the modal 
function handlefacebookmodal() {
  if(modal1.style.display != "block"){
    modal1.style.display = "block";
    modal2.style.display = "none";
    modal3.style.display = "none";
    modal4.style.display = "none";
  }else{
    modal1.style.display = "none";
  }
}


// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
  modal1.style.display = "none";
}

// When the user clicks the button, open the modal 
function handleinstamodal() {
  if(modal2.style.display != "block"){
    modal2.style.display = "block";
    modal1.style.display = "none";
    modal3.style.display = "none";
    modal4.style.display = "none";
  }else{
    modal2.style.display = "none";
  }
}

// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
  modal2.style.display = "none";
}

// When the user clicks the button, open the modal 3
function handlewhatsappmodal() {
  if(modal3.style.display != "block"){
    modal3.style.display = "block";
    modal2.style.display = "none";
    modal1.style.display = "none";
    modal4.style.display = "none";
  }else{
    modal3.style.display = "none";
  }
}

// When the user clicks on <span> (x), close the modal3
span3.onclick = function() {
  modal3.style.display = "none";
}

// When the user clicks the button, open the modal 4
function handletwittermodal() {
  if(modal4.style.display != "block"){
    modal4.style.display = "block";
    modal2.style.display = "none";
    modal3.style.display = "none";
    modal1.style.display = "none";
  }else{
    modal4.style.display = "none";
  }
}

// When the user clicks on <span> (x), close the modal4
span4.onclick = function() {
  modal4.style.display = "none";
}

window.addEventListener('click', function(e){
  if(btn1.contains(e.target)){
    handlefacebookmodal();
  }else if(btn2.contains(e.target)){
    handleinstamodal();
  }else if(btn3.contains(e.target)){
    handlewhatsappmodal();
  }else if(btn4.contains(e.target)){
    handletwittermodal();
  }else{
    modal1.style.display = "none";
    modal2.style.display = "none";
    modal3.style.display = "none";
    modal4.style.display = "none";
  }
});
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}

button{
  width: 50%;
  height: 50%;
  float: left;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  position: relative;
}

button span {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: 'Ubuntu',sans-serif;
  font-size: 70px;
  color: transparent;
}

button img{
  width: 100%;
  height: 100%;
}

button:hover img{
  opacity: 0.4;
}

button:hover span{
  color: darkblue;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 50%;
  height: 50%;
  border: 0;
}

.modal-content1 {
  position: relative;
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 30px 5px 5px 5px;
  border: 1px solid #888;
  width: 100%;
  height: 68%;
  border-radius: 7px;
}

.modal-content2 {
  position: relative;
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 30px 5px 5px 5px;
  border: 1px solid #888;
  width: 100%;
  height: 68%;
  border-radius: 7px;
}

.modal-content3 {
  position: relative;
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 30px 5px 5px 5px;
  border: 1px solid #888;
  width: 100%;
  height: 75%;
  border-radius: 7px;
}

.modal-content4 {
  position: relative;
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 30px 5px 5px 5px;
  border: 1px solid #888;
  width: 100%;
  height: 64%;
  border-radius: 7px;
}

#close {
  position: absolute;
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  top: 1px;
  right: 1px;
  background-color: lightgray;
}

#close:hover,
#close:focus {
  background-color: darkgray;
}

p, img{
  display: flex;
}

img{
  float: left;
  width: 45%;
  padding: 0;
  margin: 0;
}

p{
  float: right;
  text-align: justify;
  width: 50%;
  padding: 0;
  margin: 0;
  font-size: 20px;
}


@media (min-width: 320px) and (max-width: 767px){

}
@media (min-width: 768px) and (max-width: 1023px){
  button span{
    font-size: 30px;
    color: darkblue;
  }

  button img{
    opacity: 0.4;
  }

  .modal{
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    top: 0;
    border: 0;
  }

  #modal-content{
    margin-left: 65%;

  }

  .modal-content1 {
    margin-top: 36%; 
  }

  .modal-content2 {
    margin-top: 36%; 
  }

  .modal-content3 {
    margin-top: 37%; 
  }

  .modal-content4 {
    margin-top: 37.3%; 
  }

  p{
    font-size: 15px;
    overflow-x: scroll;
  }  

}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Nature</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button id="btn1"><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Himalaya</span></button>

    <div id="myModal1" class="modal">
      <div id="modal-content" class="modal-content1">
        <span id="close" class="close1">x</span>
        <img src="https://images.unsplash.com/photo-1577516311194-eb14c570a137?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" id="image">
        <p id="content">
          The Himalayas are a mountain range in South Asia The Himalayas are a mountain range in South Asia.The west end is in Pakistan. They run through Jammu and Kashmir, Himachal Pradesh,Uttaranchal, Sikkim and Arunachal Pradesh states in India, Nepal, and Bhutan. The east end is in the south of Tibet. They are divided into 3 parts Himadri, Himachal and Shiwaliks.The 15 highest mountains in the world are in the Himalayas. 
        </p>
      </div>
    </div>

    <button id="btn2"><img src="https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Waterfall</span></button>

    <div id="myModal2" class="modal">
      <div id="modal-content" class="modal-content2">
        <span id="close" class="close2">x</span>
        <img src="https://images.unsplash.com/photo-1493713838217-28e23b41b798?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" id="image">
        <p id="content">
          Waterfalls are commonly formed in the upper course of a river where lakes fall into in steep mountains. Because of their landscape position, many waterfalls occur over bedrock fed by little contributing area, so they may be ephemeral and flow only during rainstorms or significant snowmelt. The further downstream, the more perennial a waterfall can be. Waterfalls can have a wide range of widths and depths.
        </p>
      </div>
    </div>

    <button id="btn3"><img src="https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""><span>Raigad</span></button>

    <div id="myModal3" class="modal">
      <div id="modal-content" class="modal-content3">
        <span id="close" class="close3">x</span>
        <img src="https://mapio.net/images-p/122383921.jpg" id="image">
        <p id="content">
          Raigad is a hill fort situated in Mahad, Raigad district of Maharashtra, India. The Raigad Fort, formerly known as Rairi, was built by Chandraraoji More, the King of Jawali, who was then seized by Shivaji Maharaj who made it his capital in 1674 when he was crowned the King of the Maratha Kingdom which later developed into the Maratha Empire, eventually covering much of western and central India. The fort rises 820 metres above the sea level and is located in the Sahyadri mountain range.
        </p>
      </div>
    </div>

    <button id="btn4"><img src="https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""><span>Lake</span></button>

    <div id="myModal4" class="modal">
      <div id="modal-content" class="modal-content4">
        <span id="close" class="close4">x</span>
        <img src="https://images.unsplash.com/photo-1531512073830-ba890ca4eba2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1144&q=80" id="image">
        <p id="content">
          A lake is an area filled with water, localized in a basin, surrounded by land, apart from any river or other outlet that serves to feed or drain the lake. Lakes lie on land and are not part of the ocean. Therefore, they are distinct from lagoons, and are also larger and deeper than ponds, though there are no official or scientific definitions. Lakes can be contrasted with rivers or streams, which are usually flowing. Natural lakes are generally found in mountainous areas.
        </p>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Upvotes: 0

Views: 47

Answers (1)

ino
ino

Reputation: 1125

dont use max width,its total unnecessary.follow my pattern that i use for responsiveness(always mobile first):

.custom-class{
  height: x
}
@media(min-width:576px){
  height: y
}
@media(min-width:768px){
  height: z
}
@media(min-width:1024px){
  height: u
}
@media(min-width:1280px){
  height: v
}

use this pattern on every element u want to achieve responsiveness.

Upvotes: 0

Related Questions