what to do to make this code to responsive using float or/and relative positioning without making any errors?

Question

I'm trying to build this web page to adjust to any screen size automatically but unsuccessfully.Here's the code.What kind of changes can I do?There's both HTML and CSS.I'll even say how the way things should be placed.Run the code snippet full page and you'll see how the final page should look like.I don't expect to it to be the same with different screen sizes but it should look good(no overlapping,not respecting min and max width,etc.) whatever the screen size. I'm expecting that you can solve the problem within relative positioning and float.I'm mentioning that even if you use media queries there is no way you can do that without using float and relative positioning. Nothing other than that.I've tried so much to do it from internet but it didn't workout.Also you can see that i used relative positioning. I'm having a doubt that relative positioning makes the site unresponsive. Is that true? Also if i use float very different problem arises. Elements overlap each other(Sorry, elements overlap even it you use relative positioning.) and in somecases the background color just seperates from the element.Since i gave you code without float you might not observe this.If you observe carefully you'll see that only one of the min-width or max-width works and the other one is decided by computer. I've searched on internet but most of them say use min-width and max-width to make your site responsive. Also in some elements min-width works while in some max-width works.If you try those codes i gave you and try to make it responsive you'll encounter many new things and errors that were never explained by online MOOC's.

body {
  background-color: #d2691e;
  padding: auto;
}

header {
  padding-left: 32em;
}

h1 {
  text-decoration: underline red dotted;
  padding: 0.5em;
  background-color: black;
  color: yellow;
  width: 5.6em;
  min-width: 1.83em;
  max-width: 6.1em;
}

h2 {
  margin-left: 1.2em;
  width: 6.3em;
  background-color: #7cf000;
  min-width: 2.1em;
  max-width: 6.8em;
}

#duped {
  float: left;
  position: relative;
  left: 22em;
  min-width: 5em;
  max-width: 20em;
}

#mad {
  float: right;
  position: relative;
  top: 1px;
  min-width: 5em;
  max-width: 13.5em;
}

footer {
  float: right;
  background-color: #7cf000;
  min-width: 5em;
  max-width: 11em;
  position: relative;
  top: 16em;
  left: 11em;
}

#crushed {
  margin-top: 3.6em;
  background-color: #7cfc00;
  position: relative;
}

#rushed {
  outline: 3px solid orange;
  background-color: black;
  color: yellow;
  position: relative;
  top: 0.2em;
}

.groped {
  width: 7.5em;
  outline: 3px solid orange;
  background-color: black;
  color: yellow;
  min-width: 2.5em;
  max-width: 8.1em;
}

#success {
  outline: 3px solid orange;
  background-color: black;
  color: yellow;
  max-width: 8em;
  min-width: 2.5em;
}

#stoned {
  float: left;
  min-width: 2em;
  max-width: 11em;
}

#yes {
  background-color: #7cfc00;
}

#backoff {
  background-color: #7cfc00;
}

a {
  text-decoration: none;
}

a:hover {
  color: yellow;
  text-decoration: none;
}

a:active {
  background-color: black;
}

<!DOCTYPE html>

<html>

<head>

  <title>About me</title>
  <link rel="stylesheet" href="about me.css">

</head>

<body>

  <header>

    <h1>Crysis Surya</h1>
    <h2>Never give up.</h2>

  </header>

  <article>


    <section>

      <div id="stoned">

        <h3 id="rushed">Education</h3>

        <div id="crushed">
          <h4>High school</h4>

          <p>Raghava talent school</p>

          <h4>Intermideate College</h4>

          <p>Narayana Junior College</p>
        </div>

      </div>

    </section>

    <section id="mad">

      <h3 class="groped">Work experience</h3>

      <div id="backoff">

        <p>I worked at ice cream stone.</p>

        <p>I worked as a news distributor.</p>

      </div>

    </section>

    <section id="duped">

      <h3 id="success">Favourite things</h3>
      <div id="yes">

        <h4>Favourite foods</h4>

        <ol>
          <li>Veg biryani.</li>
          <li>My own recipe of sunfeast yipee noodles.</li>
          <li>Chapati</li>
        </ol>

        <h4>Favourite Websites</h4>

        <ul>
          <li><a href="https://courses.edx.org" target="_blank">Click me:- Edx</a></li>
          <li><a href="https://www.lumosity.com" target="_blank">Click me:- Lumosity</a></li>
          <li><a href="https://www.cambridgebrainsciences.com" target="_blank">Click me:- Cambridge Brain Sciences</a></li>
          <li><a href="www.facebook.com" target="_blank">Click me:- Facebook</a></li>
        </ul>

      </div>

    </section>

  </article>

  <footer>My contact information:-<br> saisampath32@gmail.com
    <br><br> fb/suryasaisampath
  </footer>

</body>

</html>

score 0 · Answer 1 · answered Dec 12 '17 at 11:16

0

You can use media query as like below

@media only screen and (max-width: 768px) {
/* For mobile phones: */
body {
width: 100%;
}
/* customize the tag, class, id's according to your requirement */
.class{
}
<tag>{
}
#id's{
}
}

if the width is below 768px then you can make use of above media queries.

Possible duplicate link: CSS Layout not working on mobile device

answered Dec 12 '17 at 11:16

DPS

943
11
22

Can you please explain to me what did you meant by /* customize the tag, class, id's according to your requirement */ or tell me where I can learn to do such things? – surya Dec 12 '17 at 15:29
refer this for responsive design: https://www.w3schools.com/css/css_rwd_mediaqueries.asp – DPS Dec 13 '17 at 06:27

what to do to make this code to responsive using float or/and relative positioning without making any errors?

1 Answers1