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

【问题标题】：How to make button tags visible in mobile view如何使按钮标签在移动视图中可见
【发布时间】：2020-03-18 18:41:45
【问题描述】：

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

    .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区域，但是在移动视图中没有看到任何效果，如果我使用错误的代码或将代码粘贴到错误的位置，请帮助我。

【问题讨论】：

你能用你的观点做一个fiddle的例子吗？
现在我尽力解释我的问题我希望现在你能明白我想问什么

标签： html css customization blogger

【解决方案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 选项放置。

【讨论】：

但错误仍在继续，自定义未出现在 bobile 视图中。请在桌面和移动视图中查看此页面（shouttolearn.blogspot.com/p/downloads-ebook.html）并查看我使用的按钮。为什么在移动视图中按钮不显示为桌面视图。我使用的代码与我在问题中编写的代码和@media 代码使用的是您在答案中提供的代码。
好吧，显然你有一个 @media only 屏幕和 (min-width: 980px) 在你的代码某处覆盖你的风格...尝试添加到你的 @ media 一个最小宽度像 @ media screen和 (min-width: 0px) 和 (max-width: 390px) ...或尝试查找并更改覆盖@媒体或将该样式注入您的页面的内容...可以是第三方小部件或来自您正在使用的模板...如果没有更多信息就无法提供帮助...编辑：由于 stackoverflow 的规则，必须将 @ 分开，但我希望您能理解。
好的，深入研究一下你的代码，你应该看看你有这段代码的地方：/*-------Typography and ShortCodes-------*/那是我唯一可以找到可能覆盖您的风格的@媒体的地方，并且它位于您问题中存在的代码下方。希望它可以帮助您找到解决方案。
非常感谢您的建议对我有用，我非常感谢您。我第一次尝试了stackoverflow，这让我很开心。再次非常感谢

【解决方案2】：

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

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

【讨论】：