Display/Position/ pop up box was in middle -now it's not- help?

Discussion in 'CSS' started by evelester, Jun 22, 2014.

0
  1. #1
    I am trying to finish up this site, and I had the little 'try it' pop up box coming up in the middle of the page just fine, then I guess I changed something somewhere and now it is popping up on the left- not a huge deal but it is bugging me. Can someone take a peek at the code and tell me what I messed up? Thanks so much in advance!

    Just click on either of the 'demo' buttons towards the bottom of the screen to see the box.
    greenscreenwizardpro.com/try-now/
     
    evelester, Jun 22, 2014 IP
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    in master.css for the class .demo-pop-up add margin:auto; and that should get it centered in parent.

    However that could also fail because you are using client side scripting that may corrupt the the Document Object, so what is indicated as being source may not in fact be the basis of rendering.

    The CSS is a bit on the messy side and that probably contributed to whatever mistake you made to mess it up, you have bloat in the CSS with duplicate declarations and what appears to be declarations that probably can't be true because of broken cascades.
     
    COBOLdinosaur, Jun 23, 2014 IP
  3. AlbCoder

    AlbCoder Well-Known Member

    Messages:
    126
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    163
    #3
    try this change the position: absolute; to fixed;
    .demo-pop-up {
position: fixed;
width: 100%;
height: 100%;
font-size: 0;
z-index: 2;
cursor: pointer;
}
    Code (CSS):
    if it doesnt work try adding the margin: 0 auto; to the code above.
    and 
    body {
width: 100%;
font-family: arial;
font-size: 11px;
color: #4A4848;
}
    Code (CSS):
     
    Last edited: Jul 6, 2014
    AlbCoder, Jul 6, 2014 IP
  4. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #4
    Hi evelester,

    Here's the solution:
    .demo-pop-up - from absolute to relative
    .demo-pop-up .inner - from inline-block to block
    Also remove the inlined "margin: 0 auto !important;" in <div class="inner" style="margin: 0 auto !important;"> So that it's properly controlled via CSS below.

    
.demo-pop-up {
    position: relative;
}
.demo-pop-up .inner {
    display: block;
    margin: 50px auto 0;
}
    Code (CSS):
    Preview: After fix above applied:
    [​IMG]

    I hope you follow my instructions above.

    Thanks and God bless always!

    Best regards,
    alfieindesigns
    Front-End Developer / Web Designer / UX Designer
    www.alfieindesigns.com
     
    alfieindesigns, Jul 7, 2014 IP