使用CSS的横幅顶部的响应按钮-ResponsivebuttonontopofbannerusingCSS

I have a site I'm working on in wordpress/redesigning to be more responsive. And right now I have this button that sits on top of my banner, and it looks really nice, but when I shrink down the window it gets pushed down and eventually dissapears. I want it to look like the illustration below, where the button slowly moves downwards, and perhaps resizes a bit so it becomes smaller, where it finally sits on the bottom edge of the banner when its all the way shrunk. see picture:

我有一个我正在进行wordpress /重新设计的网站,以提高响应速度。现在,我有一个位于我的横幅顶部的按钮,看起来非常好,但是当我缩小窗口时,它会被推下并最终消失。我希望它看起来像下面的插图,按钮慢慢向下移动,并且可能调整大小以使其变小,当它一直缩小时它最终位于横幅的底部边缘。看图:

Here is my code for this, I want the class "get-order" (the button) to be responsive and move down. I'm a bit new to responsive design so what are some suggestions? I noticed the site I'm working on had some media queries, so I assume that is what I should use, I just don't really know the correct and most efficient CSS way to do it.

这是我的代码,我希望类“get-order”(按钮)能够响应并向下移动。我对响应式设计有点新意,有什么建议吗?我注意到我正在处理的网站有一些媒体查询,所以我认为这是我应该使用的,我只是不知道正确和最有效的CSS方式来做到这一点。

    


        

            

                

                
Products
                
Become a member
                
Blog
                
About us
                
Contact Us
            
        
  
    

    

        
            
        
    

     
   
   

    
   







#header{ 
width:100%;
height:560px;
overflow:hidden;
z-index:99;
position:relative;
margin:0px;
padding:0px;
}

.wrap {
height: auto;
margin: 0 auto;
padding: 0;
position: relative;
width: 955px;
z-index: 999;
}

.menu {
background: url("../../../images/nav-bg.jpg") repeat-x scroll left center rgba(0, 0, 0, 0);
min-height: 60px;
position: absolute;
top: 0;
width: 100%;
z-index: 999;
}

.nav {
margin: 0;
padding: 20px 0 0 67px;
}

.nav li {
display: inline-block;
float: left;
}

* {
margin: 0;
padding: 0;
}


.get-order {
 background-image: url("/images/b.png");
 height: 98px;
 left: 330px;
 position: absolute;
 top: 230px;
 width: 400px;
 z-index: 9;
}


.banner {
background-color: #060a0b;
display: inline-flex;
height: auto;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 9;
}


@media screen and (max-width: 768px){

.wrap,.wrap-2,.wrap-3,.wrap-4{ width:750px;}
.nav li a{padding:0 18px 0 0;}
#header{ height:310px;}
.nav{ padding: 20px 0 0 33px;}
.nav li a{padding: 0 16px 0 0;}
.banner{display:inherit;}
}


@media screen and (max-width: 767px){

.wrap,.wrap-2,.wrap-3,.wrap-4{width:96%;}

.top-wrapper{ width:100%;}
.top-content{margin-top:20px;}

#menu-icon {
    color: #fff;        
    height: 30px;
    padding: 10px 20px 10px 10px;
    cursor: pointer;
    display: block;
    background:url(../../../images/arrow3.png) no-repeat  95% 40% #161677;
    line-height:28px;
    font-family:'Roboto Slab',serif;
}


#navigation {
    clear: both;
    /*position: absolute;*/
    top: 49px;
    /*width: 230px;*/
    width:100%;
    z-index: 9999;
    padding: 0px;
    display: none;
    position:absolute;
}

ul#nav-wrap{ display:none;}
.menu{ min-height:inherit;}
.nav{background:#f1f1f4;}
.nav li{ display:block; padding:5px 10px; float:none; background:none; border-top:1px solid #555559;  }
.nav li a{ color:#161677; font-size:14px;}
.nav li a.active, .nav li a:hover{ color:#303031;}
#header{ height:auto;}
.menu{position:inherit;}
.banner{ position:inherit;}
.wrap h1{padding-bottom:10px;}
.nav{ padding:0;}
}

@media screen and (min-width:320px){
.wrapper{ width:86%;}
}

1 个解决方案

@media screen and (min-width:320px){
    .get-order {
      bottom: 0;
      height: x;
      left: x;
      width: x;
   }
}