how does one Center an Edge animation in a div tag

[drotar]

hi,
trying to center an edge animation in a div tag so that when the page is resized for tablets or smart phones it centers in the div automatically. what i have so far is:

WHICH IS THE DIV TAG THAT HOLDS THE OBJECT

.center1 {
        width: 100%;
        float: left;
        background-color: rgba(255,255,0,.0);
        padding: 10px 0px 20px 0px; 
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px; /* future proofing */
        -khtml-border-radius: 10px; 
        padding-left: 1%;
        padding-right: 1%;
        margin-right: 2%;
        margin-bottom: 30px;
    }

THIS IS THE DIV FOR THE EDGE ANIMATION ITSELF

#aboutAnimation{
    position:relative;
    width: 100%;
    height: 330px;  
}

right now it is floating left. i’ve tried just about everything. any help would be greatly appreciated. the page can be seen at

http://drotardesign.com/dd/about.html

it’s the second box down the page with a green background.

thanks

[MBM]

Box3? Your design is very busy and cluttered.

[Atelierbram]

Have you tried something like this:

@media only screen and (max-width: 800px) {
 .center1 {
  width: 100%;
 }
}

[Paulie_D]

Looks centered to me…did you fix it?

Is there a specific width range at which it’s now working right?

[Author]

Posts