1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Popup center issue CSS

Discussion in 'CSS' started by ashadweb, Aug 28, 2018.

  1. #1
    How do I make the popup exact middle and center of the website
    https://www.thebeachhotel.com/
     
    Solved! View solution.
    Last edited: Aug 28, 2018
    ashadweb, Aug 28, 2018 IP
  2. #2
    here's updated code:
    div#popupContact {
      position: absolute;
      left: 50%;
      top: 50%;
      font-family: 'Raleway',sans-serif;
      background: #4b3c36;
      padding: 20px;
      width: 510px;
      -ms-transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
    }
    Code (CSS):
    this will center your popup horizontally / vertically, regardless of width.
     
    alfieindesigns, Aug 29, 2018 IP
  3. ashadweb

    ashadweb Member

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #3
    Thanks works like a charm, any idea about the mobile what should I add? Currently I've margin-ed for mobile.
     
    ashadweb, Aug 29, 2018 IP
  4. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #4
    Just remove your mobile target on 'div#popupContact ' the above code is enough to center it from desktop, tablet, mobile.

    - except the width: 510px; make sure to make it width: 100%; on below 510px breakpoints.
     
    alfieindesigns, Sep 2, 2018 IP