CSS change element Height and Width

Question

I have CSS envelope as a Element. I want to Increase 50 px height and width of Element. I changed CSS property but it not working. now How can I increase Element Height and Width?

#envelope {
          background: #F66B40;
           width: 300px;
           height: 200px;
           position: absolute;
           left: 50%;
           top: 40%; 
           margin-left: -150px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
          box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
        }

        #lid {
          position: relative;
          top: -150px;
          width: 0px;
          height: 0px;
          border-style: solid;
          border-width: 0 150px 150px 150px;
          border-color: transparent transparent #F66B40 transparent;

        }

        #letter {
          position: relative;
          background: #f6f6f6;
          padding-top:5px;
          padding-left: :5px;
          padding-right:5px;
          top: -150px;
          width: 280px;
          height: 200px;
          left: 10px;
          top: -220px;
          animation: out 5s infinite linear;
          box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
        }

<div id="envelope">
    <div id="lid"></div>
    <div id="letter"></div>
    <div id="left-corner"></div>
    <div id="right-corner"></div>
</div>

JSFIDDLE:

https://jsfiddle.net/0L37kehb

Which element of envelope you want to increase height and width — Geeky
– Geeky, Commented Nov 26, 2016 at 5:56
@rubash check my answer I increased CSS of #envolep by 50px as you requested or please more specific if you need more changes — ADH - THE TECHIE GUY
– ADH - THE TECHIE GUY, Commented Nov 26, 2016 at 6:05

AG_ · Accepted Answer · 2016-11-26 06:05:16Z

updated CSS

    #envelope {
      background: #F66B40;
       width: 350px;
       height: 250px;
       position: absolute;
       left: 50%;
       top: 40%; 
       margin-left: -150px;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
    }

    #lid {
      position: relative;
      top: -150px;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 0 175px 150px 175px;
      border-color: transparent transparent #F66B40 transparent;

    }

    #letter {
      position: relative;
      background: #f6f6f6;
      padding-top:5px;
      padding-left: :5px;
      padding-right:5px;
      top: -150px;
      width: 330px;
      height: 250px;
      left: 10px;
      top: -220px;
      animation: out 5s infinite linear;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    }

    #left-corner {
      position: relative;
      top: -315px;
      left: 10px;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 150px 0 0 300px;
      border-color: transparent transparent transparent #F66B40;

    }

    #right-corner {
      position: relative;
      top: -470px;
      left: 50px;
      width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 150px 300px;
    border-color: transparent transparent #F66B40 transparent;
    }

    @keyframes out {
      0% {top: -220px;}
      25% {top: -200px;}
      50% {top: -220px;}
      75% {top: -200px;}
    }

ADH - THE TECHIE GUY · Accepted Answer · 2016-11-26 06:10:07Z

0

for that you just edit the css of #envelope, change width: 350px; and height: 250px;

#envelope {
          background: #F66B40;
           width: 350px;
           height: 250px;
           position: absolute;
           left: 50%;
           top: 40%; 
           margin-left: -150px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
          box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
        }

        #lid {
         position: relative;
    top: -150px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 163px 150px 187px;
    border-color: transparent transparent #F66B40 transparent;

        }

        #letter {
           position: relative;
    background: #f6f6f6;
    padding-top: 5px;
    padding-left: :5px;
    padding-right: 5px;
    top: -150px;
    width: 306px;
    height: 224px;
    left: 19px;
    top: -220px;
    animation: out 5s infinite linear;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);

        }

<div id="envelope">
    <div id="lid"></div>
    <div id="letter"></div>
    <div id="left-corner"></div>
    <div id="right-corner"></div>
</div>

edited Nov 26, 2016 at 6:10

answered Nov 26, 2016 at 6:02

ADH - THE TECHIE GUY

4,4134 gold badges34 silver badges54 bronze badges

2 Comments

Rushabh Shah Over a year ago

brother it not increased size of complete envelope. it just increased width of #envelope but not of #lid #letter #left-corner #right-corner I wsant to increase size of all 4 ID.

ADH - THE TECHIE GUY Over a year ago

@RushabhShah check now

Geeky · Accepted Answer · 2016-11-26 06:15:11Z

check this snippet

#envelope {
    background: #F66B40;
    width: 350px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 40%;
    margin-left: -150px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
}
#lid {
    position: relative;
    top: -150px;
    width: 50px;
    height: 0px;
    border-style: solid;
    border-width: 0px 150px 150px 150px;
    border-color: transparent transparent #F66B40 transparent;
}
#letter {
    position: relative;
    background: #f6f6f6;
    padding-top: 5px;
    padding-left: :5px;
    padding-right: 5px;
    top: -150px;
    width: 330px;
    height: 300px;
    left: 10px;
    top: -220px;
    animation: out 5s infinite linear;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

#left-corner {
    position: relative;
    top: -315px;
    left: 10px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 150px 0 0 250px;
    border-color: transparent transparent transparent #F66B40;
}
#right-corner {
    position: relative;
    top: -470px;
    left: 50px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 150px 300px;
    border-color: transparent transparent #F66B40 transparent;
}

@keyframes out {
  0% {top: -220px;}
  25% {top: -200px;}
  50% {top: -220px;}
  75% {top: -200px;}
}

<div id="envelope">
    <div id="lid"></div>
    <div id="letter"></div>
    <div id="left-corner"></div>
    <div id="right-corner"></div>
</div>

Hope it helps

Collectives™ on Stack Overflow

CSS change element Height and Width

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related