HTML and CSS layout. How do I make it responsive?

Asked

Viewed 118 times

-2

I wanted to see a way to make the code below as if it were two columns, that if it were opened on a cell phone at 1° column and 2° were under each other.

<!DOCTYPE html>
<html>
<head>
<style> 

body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}

/* As imagens e os textos 1, 2, 3 , 4 gostaria que ficasse de um lado caso a pagina fosse dimunuida ou vista de um celular */

/* E o restante para baixo caso dê para ser responsivo */
#wb_Text1 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text1 div
{
   text-align: left;
}
#Picture1
{
   border: 0px solid #000000;
   padding: 0;
   left: 0;
   top: 0;
   width: 50px;
   height: 100%;
}
#Picture2
{
   border: 0px solid #000000;
   padding: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#MediaPlayer1
{
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text2 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text2 div
{
   text-align: left;
}
#wb_Text3 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text3 div
{
   text-align: left;
}
#wb_Text4 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text4 div
{
   text-align: left;
}
#wb_Text5 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text5 div
{
   text-align: left;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

#rcorners1 {
  border-radius: 25px;
  background: #16595c;
  padding: 20px; 
  width: autopx;
  height: autopx;  
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

#rcorners1 {
  border-radius: 25px;
  background: #16595c;
  padding: 20px; 
  width: autopx;
  height: autopx;  
}

a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
h1, .h1
{
   font-family: Arial;
   font-weight: bold;
   font-size: 32px;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
h2, .h2
{
   font-family: Arial;
   font-weight: bold;
   font-size: 27px;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
h3, .h3
{
   font-family: Arial;
   font-weight: bold;
   font-size: 24px;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
h4, .h4
{
   font-family: Arial;
   font-weight: bold;
   font-size: 21px;
   font-style: italic;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
h5, .h5
{
   font-family: Arial;
   font-weight: bold;
   font-size: 19px;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
h6, .h6
{
   font-family: Arial;
   font-weight: bold;
   font-size: 16px;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   display: inline;
}
.CustomStyle
{
   font-family: "Courier New";
   font-weight: bold;
   font-size: 16px;
   text-decoration: none;
   color: #2E74B5;
   background-color: transparent;
}

</style>
</head>
<body>

<div id="wb_Text1" style="position:absolute;left:8px;top:8px;width:341px;height:32px;z-index:0;">
<h2>11:14 Destino Fatal</h2></div>
<picture id="wb_Picture1" style="position:absolute;left:8px;top:40px;width:106px;height:29px;z-index:1">
<img src="https://d26oc3sg82pgk3.cloudfront.net/files/media/callsheet/agentlogos/logo_Media8.jpg" id="Picture1" alt="" srcset="">
</picture>
<picture id="wb_Picture2" style="position:absolute;left:8px;top:77px;width:324px;height:460px;z-index:2">
<img src="https://images-na.ssl-images-amazon.com/images/I/71FexVgesIL._SY445_.jpg" id="Picture2" alt="" srcset="">
</picture>
<div id="wb_MediaPlayer1" style="position:absolute;left:341px;top:77px;width:693px;height:460px;z-index:3;">
<video src="" id="MediaPlayer1" autoplay controls>
</video>
</div>
<div id="wb_Text2" style="position:absolute;left:217px;top:59px;width:95px;height:15px;z-index:4;">
<span style="color:#000000;font-family:Arial;font-size:12px;"><strong>Director:</strong></span></div>
<div id="wb_Text3" style="position:absolute;left:270px;top:59px;width:103px;height:14px;z-index:5;">
<span style="color:#000000;font-family:Arial;font-size:11px;">Greg Marcks</span></div>
<div id="wb_Text4" style="position:absolute;left:121px;top:46px;width:70px;height:16px;z-index:6;">
<span style="color:#000000;font-family:Arial;font-size:13px;">2003</span></div>
<div id="wb_Text5" style="position:absolute;left:625px;top:33px;width:154px;height:29px;z-index:7;">
<h3>TRAILERS</h3></div>
<div id="Html1" style="position:absolute;left:8px;top:545px;width:324px;height:51px;z-index:8">
<html>
<body style="text-align:center;">

<div id="rcorners1">
<div class="tooltip"><b>Starring:</b>
</div>
<div class="tooltip">Henry Thomas,
  <span class="tooltiptext"> <img src="https://m.media-amazon.com/images/M/MV5BNWNjZjc1NTYtZmY2Mi00MjZhLWE4ZjYtYTMyNWFmYjRkZDdmXkEyXkFqcGdeQXVyMTAyNzUwOTA5._V1_.jpg" style="width:200px; height: 300px"></span>
</div>
<div class="tooltip">Colin Hanks,
  <span class="tooltiptext"> <img src="https://m.media-amazon.com/images/M/MV5BNWNjZjc1NTYtZmY2Mi00MjZhLWE4ZjYtYTMyNWFmYjRkZDdmXkEyXkFqcGdeQXVyMTAyNzUwOTA5._V1_.jpg" style="width:200px; height: 300px"></span>
</div>
<div class="tooltip">Ben Foster
  <span class="tooltiptext"> <img src="https://m.media-amazon.com/images/M/MV5BNWNjZjc1NTYtZmY2Mi00MjZhLWE4ZjYtYTMyNWFmYjRkZDdmXkEyXkFqcGdeQXVyMTAyNzUwOTA5._V1_.jpg" style="width:200px; height: 300px"></span>
</div>
</div>

</body>
</html></div>
<div id="Html2" style="position:absolute;left:341px;top:554px;width:701px;height:51px;z-index:9">
<html>
<body style="text-align:center;">

<div id="rcorners1">
<div class="tooltip"><b>Categories:</b>
</div>
<div class="tooltip">Crime,
</div>
<div class="tooltip">Drama,
</div>
<div class="tooltip">Misterio,
</div>
</div>

</body>
</html>

html css

  • I can’t give you a good answer right now, but you’re looking for @media in css, if you understand a little English, take a look at this link

1 answer

2


First, be very careful in using tags, you are opening one <html> and a <body> for each content and should not do so. Assemble your entire structure within the tag <body> and then use <div>, <section>, etc., as in the example below:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Minha Página</title>
</head>
<body>

<main id='page-content'>
    <section id='sect-one'>
        <!-- CONTEÚDO DA SESSÃO 1 -->
    </section>

    <section id='sect-two'>
        <!-- CONTEÚDO DA SESSÃO 2 -->
    </section>
</main>

</body>
</html>

Done that, to leave the two <section> side by side is simple, using display: flex:

#page-content {
   width:100%;
   display:flex;
   justify-content:space-between;
}

#sect-one, #sect-two {
   width:50%;
}

In the above code, I set the size to 50% for each of the <section>, as they will stand side by side on desktop monitors.

Now to get one under the other in the mobile just use the @media CSS. As no screen size has been stipulated, I will work with the maximum size of 768px:

@media(max-width:768px) {
   #page-content {
      flex-direction: column;
   }

   #sect-one, #sect-two {
      width:100%;
   }
}

I set that on smaller screens than 768px the layout will be oriented in spine instead of lines as it comes in flex by default, and also changed the width of the two blocks to fill 100% of the screen, the final code would look like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Minha Página</title>
</head>

<style>
    #page-content {
        width:100%;
        display:flex;
        justify-content:space-between;
    }

    #sect-one, #sect-two {
        width:50%;

        /* APENAS PARA VISUALIZAR, PODE APAGAR! */
        height: 500px;
        background-color:red;


    }

    @media(max-width:768px) {
        #page-content {
            flex-direction: column;
        }

        #sect-one, #sect-two {
            width:100%;
        }
    }
</style>

<body>

<main id='page-content'>
    <section id='sect-one'>
        <!-- CONTEÚDO DA SESSÃO 1 -->
    </section>

    <section id='sect-two'>
        <!-- CONTEÚDO DA SESSÃO 2 -->
    </section>
</main>

</body>
</html>

Placing the contents of your separate page on each block will solve your problem. But anyway worth remembering to stay tuned in the tags you use. I suggest you research a little about HTML semantic.

I hope it helped.

  • Matthew, I’m trying to put the content from your code but I can’t make the layout equal or similar to the one I sent, but your suggestion is what I need. Let’s talk in chat?

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.