Answers for "css max width align center"

CSS
0

css max width align center

/* example of how to center an absolute (or relative) element that
has a max-width, basically if max-width is used we have to calc
how left the element should be, otherwise we just use a percent*/
#popup {
    box-sizing: border-box;
    display: block;                                                
    position: absolute;
    max-width: 800px;                                                                 
    width: 60%;
    /*subtract 400 ie: 1/2 of 800*/
    left:calc(50% - 400px);
}
    
/*this is triggered if max width is not hit:ie popup is less than 800px*/
/*here we know our width is 60% so we can just go left 20% to center*/
/*1333 = 800/.6 */
@media only screen and (max-width: 1333px) {
    #popup {
          left: 20%;
    }
}
Posted by: Guest on August-03-2021

Browse Popular Code Answers by Language