如何解决我的工作网站上的 Ghost 主题有问题 - 侧边栏不是移动响应式的
我在工作中被要求修复我们网站的问题。我没有创建它,所以我必须了解导致此错误的原因,但我们将不胜感激。 在 Screen PC 中,网站运行良好;在移动设备上点击打开侧边栏,点击服务,子菜单打开正常:
但是,当您单击下方的“行业”时,会出现以下内容:
我下载了安装在 Ghost 上的主题并检查了 css 文件,我认为那里有引导程序问题,但我不确定...
如果有人能给我一些提示或想法 - 让我知道是否应该在这部分放一些代码。
谢谢
enter code here
/*------INDUSTRIES-SUBMENU------*/
#content-desktop {display: block;}
#content-mobile {display: none;}
@media screen and (max-width: 768px) {
#industries-submenu ul{
padding: 0;
margin: 20px 0 40px 0;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
position: relative;
}
#industries-submenu ul li{
width: 25%;
margin-top: 20px;
padding-right: 30px;
}
#content-desktop {display: none;}
#content-mobile {display: block;}
#industries-submenu ul li a{
color: #1a2c47;
font-size: 16px;
font-weight: 700;
}
#industries-submenu ul li ul{
margin: 10px 0 0 0;
}
#industries-submenu ul li ul li{
margin-bottom: 10px;
width: 100%;
margin-top: 0;
}
#industries-submenu ul li ul li a{
color: #4f5661;
font-size: 14px;
font-weight: 600;
}
}
/*===== 2. INDUSTRIES =====*/
.breadcrumbs-blog .breadcrumb-item.active:last-child:before{
content: 'Blog';
margin-left: 4px;
display: block;
color: #1a2c47;
}
#breadcrumb-section{
border-top: 1px solid #f0f0f0;
padding: 25px 0 50px 0;
}
.breadcrumb{
background-color: transparent;
padding: 0;
margin: 0;
}
.breadcrumb .breadcrumb-item{
padding: 0;
}
.breadcrumb li a{
color: #0e50b2;
font-size: 14px;
font-weight: 700;
}
.breadcrumb li a:after{
width: 5px;
height: 8px;
content: '';
display: inline-block;
background-image: url('../img/icon-arrow-small.svg');
margin: 0 5px 1px;
}
.breadcrumb-item+.breadcrumb-item::before{
display: none;
}
.breadcrumb-item.active {
color: #1a2c47;
font-weight: 600;
font-size: 14px;
display: flex;
line-height: 22px;
align-items: flex-end;
}
#page-content .post-title{
font-size: 40px;
font-weight: 800;
line-height: 48px;
margin-bottom: 20px;
}
#page-content .featured-image{
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
.editor-content h1,.editor-content h2,.editor-content h3,.editor-content h4,.editor-content h5,.editor-content h6{
font-weight: 700;
margin-bottom: 20px;
margin-top: 50px;
}
.editor-content h1{
font-size: 36px;
line-height: 48px;
}
.editor-content h2{
font-size: 32px;
line-height: 38px;
}
.editor-content h3{
font-size: 28px;
line-height: 34px;
}
.editor-content h4{
font-size: 24px;
line-height: 28px;
}
.editor-content h5{
font-size: 18px;
line-height: 30px;
}
.editor-content h6{
font-size: 14px;
line-height: 24px;
}
.editor-content p{
font-size: 18px;
font-weight: 400;
line-height: 30px;
}
.editor-content a:not(.btn){
text-decoration: underline;
}
.editor-content ul,.editor-content ol{
padding-left: 20px;
margin: 0;
}
.editor-content ul li{
list-style-type: disc;
font-size: 18px;
line-height: 30px;
margin-bottom: 10px;
}
.editor-content ol li{
font-size: 18px;
line-height: 30px;
margin-bottom: 10px;
}
.editor-content img{
max-width: 100%;
height: auto;
}
.editor-content table{
width: 100%;
margin: 30px 0;
background-color: transparent;
}
.editor-content td,.editor-content th {
padding: .75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
.editor-content .table-holder{
width: 100%;
overflow: auto;
}
/*-----SIDEBAR-----*/
.sidebar{
overflow: hidden;
}
.sidebar .sidebar-get-a-quote{
background-color: #082e69;
position: relative;
padding: 60px 20px;
text-align: center;
background-image: url('../img/sidebar-illustration-1.svg');
background-position: center bottom;
background-repeat: no-repeat;
border-radius: 3px;
}
.sidebar .sidebar-get-a-quote .get-a-quote-info{
position: relative;
z-index: 2;
}
.sidebar .sidebar-get-a-quote .get-a-quote-info h3{
color: #ffffff;
font-size: 24px;
font-weight: 700;
line-height: 32px;
margin-bottom: 25px;
}
.sidebar .sidebar-get-a-quote .get-a-quote-info .btn{
font-size: 18px;
}
.sidebar .sidebar-associated-links{
background-color: #f8f8f8;
padding: 25px 20px;
}
.sidebar .sidebar-associated-links h3{
font-size: 18px;
font-weight: 700;
line-height: 30px;
margin-bottom: 20px;
}
.sidebar .sidebar-associated-links ul{
margin: 0;
}
.sidebar .sidebar-associated-links ul li{
margin-bottom: 15px;
}
.sidebar .sidebar-associated-links ul li:last-child{
margin-bottom: 0;
}
.sidebar .sidebar-associated-links ul li a{
line-height: 26px;
font-size: 14px;
color: #0e50b2;
display: block;
}
.sidebar .list-Boxed .parent{
width: 100%;
margin-bottom: 0;
}
.sidebar .list-Boxed li ul li{
border-bottom: 1px solid #ededed;
}
.sidebar p,.sidebar ul li,.sidebar ol li{
font-size: 16px;
line-height: 26px;
}
.widget{
margin-bottom: 30px;
}
.widget h3{
font-weight: bold;
margin-bottom: 20px;
}
.sidebar .latest-posts{
border-top: 1px solid #e5e5e5;
padding-top: 30px;
margin: 0;
}
.sidebar .latest-posts li a{
display: block;
margin-bottom: 20px;
text-decoration: underline;
}
.sidebar .latest-posts li:last-child a{
border: none;
}
#big-get-a-quote{
margin-top: 100px;
padding: 120px 0;
background-color: #082e69;
background-image: url('../img/big-get-a-quote.png');
background-position: center bottom;
background-repeat: no-repeat;
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 400;
line-height: 30px;
}
#big-get-a-quote h3{
font-size: 36px;
font-weight: 400;
line-height: 48px;
color: #fff;
font-weight: bold;
margin-bottom: 25px;
}
#big-get-a-quote p:first-of-type{
font-size: 24px;
line-height: 34px;
}
#big-get-a-quote .btn{
margin: 50px auto 0;
}
.editor-content img,.editor-content .kg-width-full img,.editor-content .kg-width-wide img{
max-width: 100%;
height: auto;
position: relative;
margin: 0;
border-radius: 5px;
}
.editor-content .kg-gallery-container {
display: flex;
flex-direction: column;
margin: 10px auto;
position: relative;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.editor-content .kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.editor-content .kg-gallery-image img {
display: flex;
object-fit: cover;
margin: 0;
width: 100%;
height: 100%;
}
.editor-content .kg-gallery-row:not(:first-of-type) {
margin: 10px 0 0 0;
}
.editor-content .kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 10px;
}
.editor-content figcaption{
padding: 10px 15px;
font-size: 14px;
border-bottom: 1px solid #ededed;
}
.loop .post{
display: flex;
margin-bottom: 30px;
}
.loop .post .post-inner-content{
width: 100%;
position: relative;
overflow: hidden;
}
.loop .inner{
position: relative;
}
.post .img-holder {
overflow: hidden;
border-radius: 5px;
margin-bottom: 10px;
}
.post .img-holder .featured-image{
display: block;
width: 100%;
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.post .img-holder .featured-image:before{
display: block;
content: '';
width: 100%;
padding-bottom: 75%;
}
#page-content .post .img-holder .featured-image{
margin: 0;
}
.post .inner-featured-image{
margin-bottom: 30px;
}
.loop .post:hover .img-holder .featured-image{
transform: scale(1.1,1.1);
}
.loop h3{
font-size: 20px;
margin: 5px 0;
padding: 0;
font-weight: bold;
}
#load-posts{
display: flex;
width: 180px;
margin: 100px auto;
}
#load-posts.finish{
width: 260px;
opacity: .5;
}
.manual-tags{
display: flex;
flex-wrap: wrap;
}
.manual-tags a{
padding: 5px 10px;
background: #f0f0f0;
margin-right: 10px;
}
.loop-news .item:first-child .post{
border-top: 1px solid #9e9e9e;
padding-top: 30px;
}
.loop-news .post{
border-bottom: 1px solid #9e9e9e;
padding-bottom: 20px;
}
.loop-news .inner{
padding-right: 30px;
}
.loop-news .post-inner-content{
display: flex;
justify-content: space-between;
}
.loop-news .post-inner-content .post-Meta{
min-width: 150px;
text-align: right;
}
@media screen and (max-width: 1199px) {
.sidebar .sidebar-get-a-quote .get-a-quote-info .btn {
font-size: 14px;
height: 50px;
}
#stats ul li p{
font-size: 16px;
}
#stats ul li p b{
font-size: 18px;
}
#industries ul li a{
font-size: 16px;
line-height: 1.2;
}
#why-obelis .blockquote p{
font-size: 18px;
line-height: 28px;
}
#stats ul li .img-inner{
width: 54px;
height: 54px;
}
.home-video iframe[src*="https://www.youtube.com/"] {
height: calc(210px / 1.77777778) !important;
width: 100% !important;
}
}
@media screen and (max-width: 991px) {
.navigation-trigger,.mobile-nav,.mobile-backdrop{
display: block;
}
.mobile-nav .logo img{
width: 200px;
height: 62px;
}
header .topbar{
display: none;
}
header .nav {
padding: 10px;
}
header .menu .nav {
display: none;
}
.navigation-trigger{
display: flex;
align-items: center;
}
.mobile-backdrop{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 998;
background: rgba(0,0.5);
visibility: hidden;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mobile-nav{
position: fixed;
width: 100%;
max-width: 300px;
height: 100%;
left: 0;
top: 0;
z-index: 999;
transform: translateX(-100%);
background: #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.menu-active .mobile-backdrop{
visibility: visible;
opacity: 1;
pointer-events: all;
}
.menu-active .mobile-nav{
transform: translateX(0);
}
header .mobile-nav .topbar{
display: block;
margin-bottom: 44px;
}
header .mobile-nav .nav{
display: block;
padding: 0;
}
header .mobile-nav .logo{
padding: 15px;
}
header .nav ul{
flex-direction: column;
}
header .nav ul li a{
display: flex;
padding: 10px 15px;
border-bottom: 1px solid #f8f8f8;
color: #143074;
font-weight: 600;
justify-content: space-between;
align-items: center;
text-decoration: none;
}
header .nav ul li a:focus,header .nav ul li a:hover{
text-decoration: none;
}
header .nav ul li .btn{
margin: 15px;
}
header .topbar .container{
padding: 0;
}
header .topbar .search-btn{
display: none;
}
header .topbar .header-top{
justify-content: flex-start;
}
header .topbar .header-top ul{
width: 100%;
display: flex;
justify-content: flex-start;
white-space: Nowrap;
overflow: auto;
}
header .topbar ul li{
margin-right: 0;
}
header .topbar ul li a{
display: flex;
padding: 5px 10px;
line-height: 24px;
}
header .mobile-nav{
overflow: auto;
}
header .mobile-nav .search{
visibility: visible;
opacity: 1;
left: 0;
max-width: 100%;
width: 100%;
height: 44px;
pointer-events: all;
}
header .mobile-nav .search input{
font-size: 14px;
}
header .mobile-nav ul li a i{
display: none;
}
header .mobile-nav ul li a[data-submenu] i{
display: inline-block;
margin-left: 10px;
}
#services .inner .service-holder p{
font-size: 16px;
line-height: 24px;
}
.industries-and-services .col-industries ul li{
width: 100%;
}
#stats{
overflow: auto;
}
#stats ul{
min-width: 1000px;
padding-right: 30px;
}
#about-us-section .who-we-are:before{
width: 100vw;
right: 50%;
transform: translateX(50%);
}
#about-us-section .who-is-it-for .inner {
padding-left: 0;
}
.submenu{
display: none !important;
}
header .mobile-nav .submenu{
position: relative;
top: 0;
left: 0;
opacity: 1;
visibility: visible;
padding: 0;
}
header .mobile-nav .active .submenu{
display: block !important;
}
header .mobile-nav .submenu p,header .mobile-nav .submenu p + a,header .mobile-nav .submenu .link{
display: none;
}
#industries-submenu ul{
margin: 0;
}
#industries-submenu ul li {
width: 100%;
margin-top: 0px;
padding-right: 0px;
}
.submenu h3{
margin: 0;
}
header .nav ul li .submenu a{
padding: 15px 30px;
border-bottom: 1px solid #aeb3bd;
margin-left: -15px;
width: calc(100% + 30px);
line-height: 1;
color: #143074;
}
.submenu-style-1 {
padding: 10px 0 10px 20px;
}
header .search .btn{
top: 2px;
transform: none;
right: 17px;
}
.list-Boxed .parent{
width: calc(50% - 30px);
}
.safer-markets ul li{
width: 100%;
flex: auto;
margin-bottom: 30px;
border: none;
}
.home-video{
margin-top: 0;
}
.home-video iframe[src*="https://www.youtube.com/"] {
height: calc(510px / 1.77777778) !important;
width: 100% !important;
}
.why-obelis ul{
padding: 40px 20px;
}
}
@media screen and (max-width: 767px) {
.intro{
padding: 60px 0 100px 0;
}
.intro h1{
font-size: 30px;
}
.intro p{
font-size: 16px;
}
#why-obelis{
padding: 50px 0;
}
#about-us-section .who-is-it-for{
padding: 50px 0;
}
#about-us-section .inner {
padding: 50px 0;
}
#about-us-section .who-is-it-for .inner{
padding: 0;
}
.list-posts ul li b{
display: block;
margin: 0;
}
footer .footer-bottom ul{
flex-wrap: wrap;
}
.banner .text-right{
display: flex;
margin-bottom: 20px;
}
#services .features li{
width: 100%;
}
#services .inner .row:before,#services .inner .row:after,#services .inner:before{
display: none;
}
#services .inner .service-holder{
padding: 30px 0;
}
#services .features{
margin: 0;
}
#services .inner{
border: none;
}
.section-title{
margin-bottom: 50px;
}
.list-Boxed .parent{
width: 100%;
margin: 0 15px 15px;
}
.industries-and-services {
margin: 0 0 50px 0;
}
.loop .post .post-inner-content{
flex-direction: column;
}
.loop-news .post-inner-content .post-Meta{
text-align: left;
}
.loop-news .post{
padding-bottom: 30px;
}
}
@media screen and (max-width: 575px) {
#why-obelis .blockquote{
padding: 60px 30px;
}
header .nav .menu .logo img,.mobile-nav .logo img {
width: 100px;
height: auto;
}
footer .footer-top{
padding: 20px 0;
}
.home-video iframe[src*="https://www.youtube.com/"] {
height: calc((100vw - 30px) / 1.77777778) !important;
width: 100% !important;
}
}
解决方法
我发现了问题 - 但我认为,您可以自己解决它,因为您更了解项目的结构。
- 使用 Chrome(或 Firefox)打开链接
- 按 F12 并选择移动分辨率: 在这里你可以打开手机菜单查看bug,如图
- 现在尝试在 Chrome 中更改分辨率的宽度: 您会看到,该错误将被自动修复
在开发者工具中查看 HTML 和 CSS 时,在执行这些步骤时,您会发现它们发生了变化。因此,您必须查看正在发生的变化并尝试在此处找到解决方案。
我猜你的情况是一些 CSS 值在开始时设置错误(可能是在动态初始化页面时??)。
更新:
看来,您的 top
标记(li
类)中的 parent sub-industries
CSS 属性导致了问题(似乎是动态计算的)。
希望能帮到你!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。