How to prevent a button from moving when resizing the window

Question

I can use some help as I am new to html coding. anyway, I've made a carousel with bootstrap. The carousel itself works fine. But after placing a button in the carousel, (using top: (px) and right: (px) as I don't know how to place it where I want otherwise)it still works fine. Until I start resizing the window. The background becomes smaller, but the button kind of stays the same size. So it starts moving around and what once were 2 buttons next to eachother, are now 2 buttons with alot of space between them. Here, have a look at my code: HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width = device-width, initial-scale = 1">
        <title>Galaxy</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css">
</style>
    </head>
        <body>
            <div id="theCarousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#theCarousel" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="galaxy3.jpg"> 
                        <div class="slide1"></div>
                        <div class="carousel-caption">
                            <div class="bannertext">
                                <h1>Santorodesign</h1>
                                <p>A website made by Michael</p>
                                <div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
                                <div class="mobileHide"> <button id="headerbutton-english">English</button></div>
                            </div>                              
                        </div>
                </div>
                <div class="item">
                    <div class="slide2"></div>
                    <img src="galaxy2.jpg">
                    <div class="carousel-caption">
                        <div class="bannertext2">
                            <h1>Explore the galaxy<h1>
                    </div>
                </div>          
            </div>

                <a class="left carousel-control" href="#theCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>

                <a class="right carousel-control" href="#theCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span> 
                </a>            
            </div>
        </div>
        <div id="firstrow">
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img id="mercury" src="mercury.png"> <br>
                (text) <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img id="earth" src="earth.png"> <br>
                (text)<br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img id="venus" src="venus.png"> <br>
                (text) <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Venus</button></a>
            </div>
        </div>          
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script> 
    </body>
</html>

CSS

.carousel-control.left, .carousel-control.right {
    background-image: none
}
#firstrow {
   font-size: 2em;
   padding: 100px 0 0 0;
   width: 100%;
   height: 550px;
   text-align: center;
   color: black;
   background: #DCDCDC;
   position: relative;
}
@media all and (max-width: 900px) {
    #headerbutton-nederlands { display: none; }
    #headerbutton-english { display: none; }
}
.planet {
    margin-bottom: 30px;
    position: relative;
}
    .planet img {
        height: 300px;
        max-width: none;
    }

    .bannertext {
        font-size: 1.3em;
        line-height: 15px;
    }
    .bannertext h1 {
        font-size: 2em;
    }
    .bannertext2 {
        font-size: 2em;
    }
 .mobileShow { display: none;}
 .mobileHide { display: inline;}
     /* Smartphone Portrait and Landscape */
    @media only screen
        and (max-device-width : 480px){
        .mobileShow { display: inline;}
        .mobileHide { display: none;}
        .planet img{
            height: 200px;
        }
        }
#headerbutton-nederlands {
    position: absolute;
    font-weight: bold;
    bottom: 35px;
    right: -90px;
    -webkit-border-radius: 5px;
    line-height: 50px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;    
}
#headerbutton-english {
    position: absolute;
    font-weight: bold;
    bottom: 35px;
    right: 100px;
    -webkit-border-radius: 5px;
    line-height: 50px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;
}

basically what I want is that the buttons + the text inside of the buttons also resize when the window becomes smaller. As if the buttons are a part of the image.

Thank you for your time. -Michael

judging by the 2 very different answers, it might be a good idea to clarify your question with a http://codepen.io or http://jsfiddle.net demo — ryantdecker, Apr 15 '17 at 19:29
possible duplicate with [this question](http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css). If you plan in the future to write SCSS instead of pure CSS you can check also [this mixin](https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/). — andreim, Apr 15 '17 at 19:30

score 2 · Accepted Answer · answered Apr 15 '17 at 19:26

If you want the buttons to scale relative to the size of the screen, you need to style them with relative units instead of pixels. You can use, % to size them relative to their parent element, em or rem to size them relative to the size of the font, or --most likely for your needs-- vh or vw to scale them relative to the height and width of the viewport, respectively.

Assuming your initial styles work on a viewport 1140px wide (just an arbitrary starting point), the following CSS may get you headed in the right direction:

#headerbutton-nederlands {
    position: absolute;
    font-weight: bold;
    bottom: 3vw;
    right: -8vw;
    -webkit-border-radius: .5vw;
    line-height: 4.3vw;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;    
}

score 1 · Answer 2 · 2017-04-15T19:30:09.140

You need to add position: relative; property to the .bannertext element. What this does is when a child element is absolutely positioned inside a relatively positioned parent, it makes sure the child element stays relative from the bounds of the parent. So change .bannertext in your CSS to the following and it should work.

.bannertext {
    font-size: 1.3em;
    line-height: 15px;
    position: relative;
}

You may need to update the top and right properties though so it's back in the right place you wanted again.

How to prevent a button from moving when resizing the window

2 Answers2