CODEWITHSUNDEEP
htmlcssresponsive-design
shehzad_ucdavis
shehzad_ucdavis

Reputation: 135

Clustering div elements together and making it responsive

I'm trying to create a basic 404 html page that is responsive. However, whenever I change screen size (or go on mobile), the text overlaps. I apologize if this question isn't very good; I'm still trying to learn.

Here is my code, and I've also attached a picture of the problem. 

    #holder {
      left: 0;
      position: fixed;
      width: 100%;
      top: 0;
    }
    #div2 {
      width: 50px;
      height: 30px;
      color: #54b1c8;
      font-size: 160%;
      position: fixed;
      top: 44%;
      left: 38.5%;
      font-family: 'exo2';
      -ms-transform: rotate(-66deg);
      /* IE 9 */
      -webkit-transform: rotate(-66deg);
      /* Chrome, Safari, Opera */
      transform: rotate(-66deg);
    }
    #huge {
      position: fixed;
      top: 39%;
      left: 40%;
      color: #54b1c8;
      font-family: 'exo2';
      font-size: 960%;
    }
    #h2 {
      position: fixed;
      top: 57%;
      left: 40%;
      font-family: 'exo2';
      font-size: 360%;
    }
<div id="holder">
  <div id="div2">Error</div>
  <div id="huge">404</div>
  <div id="h2">Not Found</div>
</div>

enter image description here

Upvotes: 2

Views: 321

Answers (4)

CodeRomeos
CodeRomeos

Reputation: 2448

You may try this. Min-width #holder is set to 320px; for small devices.

<style> 
#holder {
left:0;
position:relative;
max-width: 18%;
min-width:320px;
margin:90px auto;
transform:translate(0%,90%);
text-align:center
}
#div2 {
width: 50px;
height: 30px;
color: #54b1c8;
font-size: 160%;
position:absolute;
top: 40; 
left: 20;

font-family: 'exo2';
-ms-transform: rotate(-66deg); /* IE 9 */
-webkit-transform: rotate(-66deg); /* Chrome, Safari, Opera */
transform: rotate(-66deg);
}
#huge {     
top: 1%;
left: 40%;
color: #54b1c8;
font-family: 'exo2';
font-size: 960%;
 }
#h2 {
padding:0px;
margin:0px;
position:absolute;
bottom:-25;
left:35;
font-family: 'exo2';
font-size: 360%;
}
</style>

  <div id="holder">
    <div id="div2">Error</div>
    <div id="huge">404</div>
    <div id="h2">Not Found</div>
  </div>

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14189

You can use this way 

#holder {
        width: 100%;
        position: absolute;
        height: 100%;
        z-index: 999999;
    }

        #holder .test {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 250px;
            margin-left: -125px;
            height: 150px;
            margin-top: -75px;
        }

        #holder #div2 {
            color: #54b1c8;
            font-family: "exo2";
            font-size: 160%;
            height: 30px;
            margin-bottom: -70px;
            margin-left: -30px;
            width: 50px;
            -ms-transform: rotate(-66deg); /* IE 9 */
            -webkit-transform: rotate(-66deg); /* Chrome, Safari, Opera */
            transform: rotate(-66deg);
        }

        #holder #huge {
            color: #54b1c8;
            font-family: "exo2";
            font-size: 960%;
            margin-bottom: -20px;
        }

        #holder #h2 {
            font-family: 'exo2';
            font-size: 360%;
        }

And HTML 

<div id="holder">
    <div class="test">
        <div id="div2">Error</div>
        <div id="huge">404</div>
        <div id="h2">Not Found</div>
    </div>
</div>

Upvotes: 1

Shivangi
Shivangi

Reputation: 3072

Try this:

Give your huge 

margin-top: -115px;

and your #div2

margin-top: -85px;

The reason being, this helps you 404 to be exactly at the center of the page.

Upvotes: 0

RobBenz
RobBenz

Reputation: 609

You could go about solving this problem a number of different ways.

A good place to start would be to use media screen queries. You could look for a screen size chart to get your sizing breaks.

In your css code you can call a certain media query to display different css for different screen sizes.

@media only screen and (min-width : 1px) and (max-width : 400px) {

#div {some:css;}

}

@media only screen and (min-width : 401px) and (max-width : 800px) {

#div {some-different:css;}

}

An even better option is to learn how to work with bootstrap - a responsive easy to use framework.

Upvotes: 1

Related Questions