0

enter image description here

I've added a simple drop-down ad to my website, that will be triggered after X sec, the layout of the website is the same as before.

On every device I've checked, everything is working just fine, except my own:) in chrome, the layout is all messy, as you see on the picture above, but on different browser everything is ok.

you can see the website here : https://www.start-2-code.com/

I've added all of the necessary prefixes for chrome, and also double checked the website using chrome on different devices, but I can't find the problem

 <div class = "image_pop">
            <div class="image_pop_up" >
            <a href="#main__content" class="image_pop_up_close">&times;</a>
            <a href="https://click.linksynergy.com/fs-bin/click?id=ZmWG8YDQO/4&offerid=507388.4670&subid=0&type=4">
                <img 
                    class = "image_pop_up_image"
                    alt="The Official Alibaba Course for only $10.99." 
                    src="https://mproxy.banner.linksynergy.com/fs/banners/39197/39197_1622.png">
            </a>
            </div>  
        </div>

CSS CODE

.image_pop {
  height: 100vh;
  width: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  opacity: 0;
  visibility: hidden;
  margin: 0 auto; }

  .image_pop_up {
    width: 50vw;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    -webkit-box-shadow: 0 -2rem 6rem rgba(0, 0, 0, 0.8);
            box-shadow: 0 -2rem 6rem rgba(0, 0, 0, 0.8); }
    @media only screen and (max-width: 31.25em) {
      .image_pop_up {
        width: 70vw; } }

    .image_pop_up_close {
      color: black;
      text-decoration: none;
      line-height: 1;
      font-size: 4rem;
      position: absolute;
      top: .5rem;
      left: 1rem; }

    .image_pop_up_image {
      max-width: 100%;
      max-height: 100%; }

I'm guessing we have a different version of chrome on different devices, so that is what causing the problem?

NyaSol
  • 537
  • 1
  • 5
  • 21
  • I would recommend you to use Normalize.css or something similar to reset your CSS. – kalicki2k May 22 '19 at 20:06
  • I've added a photo of the layout on my phone (galaxy s8 - chrome) – NyaSol May 22 '19 at 20:12
  • 1
    It can be a cache related issue, have you try to clean the cache or browse in private mode? – Tristan Pct May 22 '19 at 20:26
  • @Tsistan PCT apparently it is a cache problem, private mode solved the problem why is it happening? and how can I make sure this will not happen to other users? – NyaSol May 22 '19 at 20:46
  • By adding a version number: https://stackoverflow.com/questions/7671168/why-adding-version-number-to-css-file-path @netanel94 – kalicki2k May 23 '19 at 10:59

0 Answers0