当我的网站转到850px时,它切换到移动设计,问题是我有一个在桌面和移动模式下都出现的按钮,但当它在移动设计的开始时是850px,按钮隐藏在标题横幅下。我想把整个网站的主体内容往下推。我可以在桌面模式下使用CSS属性- margin-top: 200px
来做这件事,我想知道是否有任何@media
或任何其他类型的代码可以仅针对移动设计来更改这一点。
我发现,如果我放入<br>
的代码,它确实会改变它,但肯定有一个更好的方法,而不仅仅是在按钮代码中有几个<br>
,即使这样也只是为了桌面设计而改变它。
如果我的解释没有多大意义,很抱歉。
我会显示我的按钮代码,如果这有帮助,如果需要任何其他代码来帮助,可以让任何人让我知道。
<!--Button Code Start-->
<div class="quote-button-main">
<center>
<style>
.quote-button-main .button {
display: inline-block;
border-radius: 20px;
background-color: #45C236;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 20px;
padding: 15px;
width: auto;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 26px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
<a href="products.asp" <button class="button" style="vertical-align:middle"><span>CLICK HERE FOR A NO OBLIGATION INSTANT QUOTE!</span></button> </a>
</center>
</div>
<!--Button Code END-->
再次感谢您的帮助!
桌面模式的屏幕截图:
带有隐藏在顶部横幅下的按钮的移动模式屏幕截图:
发布于 2020-02-19 11:05:51
只需将内容包装器顶部页边距放入其他CSS规则下的媒体查询中,如下所示:
@media screen and (max-width: 850px) {
.yourcontentdiv {
margin-top: 200px;
}
}
https://stackoverflow.com/questions/60298069
复制