Div keep moving when I resize the screen

  • waiwai881124

    (@waiwai881124)


    9 years, 9 months ago

    Hi everyone, hope can seeking some of your help.

    The div I have created is drive me insane because it constantly moving every time I re-size my window. I have written various rules for different size screens like 600,768,962,1024,1152 and 1200 pixels all with different left pixels dimensions, but this still doesn’t do the job properly.

    There are few buttons and one textbox that using div class.
    any solution to prevent the div moving out somewhere?
    The website : http://inovuus.com/

    <style>
    body {width:100%;
    margin:0px;
    }

    .btn-danger1 {
    position: absolute;
    top:-72px;
    left: 870px;
    z-index: 8;
    color: #fff;
    background-size: 100% center;
    background-color: #a80404;
    -webkit-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
    }
    .btn-danger1:active {
    margin-top: 3px;
    margin-bottom: -3px;
    }
    .btn-danger2 {
    position: relative;
    top:-290px;
    left: 600px;
    z-index: 8;
    color: #fff;
    background-color: #a80404;
    -webkit-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
    }
    .btn-danger2:active {
    margin-top: 3px;
    margin-bottom: -3px;
    color: #fff;
    background-color: #a80404;
    }
    .btn-danger3 {
    position: relative;
    top:-290px;
    left: 600px;
    z-index: 8;
    color: #fff;
    background-color: #a80404;
    -webkit-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
    }
    .btn-danger3:active {
    margin-top: 3px;
    margin-bottom: -3px;
    color: #fff;
    background-color: #a80404;
    }
    .textbox
    {
    position: relative;
    top: -290px;
    left: 600px;
    width: 600px;
    z-index: 8;
    color: #060957;
    font-family: ‘helvetica_neue_ltregular’;

    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 9 months ago

    Which theme is this regarding?

    Thread Starter waiwai881124

    (@waiwai881124)

    9 years, 9 months ago

    is a custom theme that develop by previous developer …

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 9 months ago

    What div specifically has the issue?

    Thread Starter waiwai881124

    (@waiwai881124)

    9 years, 9 months ago

    is the div for the button and texts on transition banner on homepage. it will move out when i test on different screen size.

    Thread Starter waiwai881124

    (@waiwai881124)

    9 years, 9 months ago

    Could someone offer me some advice please. When I resize the window I would like the div button and text to stay where they are but it move out. for example, http://quirktools.com/screenfly/#u=http%3A//inovuus.com/&w=1280&h=800&a=1

    From here can notice that the button and text on transition bar is missing when i resize to a bigger screen but it goes up when i switch to smaller screen.

    I been tried prevent div moving on window resize , and tried setting min-width, max-width, min-height, max-height for div but that doesnt solve it. Here the coding for the div ( CSS can check out the question above)

    1) <img src=”<?php bloginfo(‘template_url’);?>/images/banner23.jpg” alt=””><div id=”warpper”><button type=”button” class=”btn btn-danger1″ onclick=”window.location.href=’http://inovuus.com/end-point-backup-solution/&#8217;;”>Read More</button></div>

    2)
    <img src=”<?php bloginfo(‘template_url’);?>/images/banner242.jpg” alt=””><div id=”warpper”><div class=”textbox”><font style=”font-size: 48px;”>#1 BEST-SELLING</font><font style=”font-size: 24px;”>  INTERNET SECURITY</font>IN<font style=”font-size: 48px;”> US*</font><p style=”font-size: 18px;”>
    Outperforming Internet Security Companies in customer satisfaction,
    Webroot provides real-time anti-phishing protection that secures your identity and data while online.
    Revolutionary Security for all business and consumers, endpoint devices including tablets,
    Android and iOS devices. Download FREE System Analyser tool for a
    detailed, fast and accurate diagnosis on your system.</p>
    </div>
    <button type=”button” class=”btn btn-danger2″ onclick=”window.location.href=’http://inovuus.com/webrootbusiness/&#8217;;”>Business</button>
    <button type=”button” class=”btn btn-danger3″ onclick=”window.location.href=’ http://inovuus.com/consumer-antivirus/&#8217;;”>Consumer</button>
    </div>
    </div>

    Much appreciated for the comments and guides.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Div keep moving when I resize the screen’ is closed to new replies.

Tags