如何使按钮标签在移动视图中可见

Question

在我的博客中，我以两种不同的方式自定义了按钮标签，它们的代码如下：

    .button1 {
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit; 
background-color: #ffffff; 
margin-right: 1.7px; 
color: black; 
font-size: 18px;
font-weight: 980;
padding: 6px 32px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px; 
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2 { 
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px; 
color: white; 
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px; 
font-size: 16px;
font-family: domine;
display: inline-table;}
.button2:hover {
  background-color: #FF5733;
  color: #000000;}

但是有一个问题，我所做的定制在移动视图中不可见，它显示为默认定制。我应该如何将这些自定义实现到移动视图？帮帮我。

顺便说一句，我使用这些代码：

  @media screen and (max-width: 390px) {
.button2 { padding: 6px 32px;width: 84.6px;font-size: 16px;display: inline-table;
}
@media screen and (max-width: 390px) {
  .button1 { width: 76.6px;}
}}

使按钮标签自定义在移动视图中可见。我已经将这些代码粘贴到博主博客的 CSS 区域，但在移动视图中没有看到任何效果，如果我使用错误代码或将代码粘贴到错误位置，请帮助我。

Answer 1

首先，这是一件简单的事情，但很多人做错了：确保将@media 代码放在其他代码的下面。其次，如果您有相同的 @media 屏幕和 (max-width: 390px)，为什么不将两种按钮样式都放在同一个@media 中？像这样：

@media screen and (max-width: 390px) {
   .button2 { padding: 6px 32px;width: 84.6px;font-size: 16px;display: inline-table;
    }
   .button1 { width: 76.6px;}
}

哦，这个 css 应该使用模板的编辑 html 选项。

Answer 2

此类问题通常有以下原因之一：

您的服务器支持缓存。尝试从浏览器中删除缓存。
确保 @media 代码位于主要 .button2 和 .button1 代码下方。
确保将 @media 代码与主按钮代码放在同一个文件中

如何使按钮标签在移动视图中可见

How to make button tags visible in mobile view

html

css

customization

blogger