Question

我有一个小CSS问题，不知道如何解决自己。我想进入移动响应式视图，将徽标放在左上方并移动按钮“SlevaplatítakénaBeats！”向右，因此适合智能手机屏幕尺寸。用图像解释我真正需要的东西：

我使用此CSS向上移动徽标并向左移动：

@media screen and (max-width: 479px) and (min-width: 100px) {
.logo.is_logo.tip{
float: left !important;
display: table;
margin: -88px auto 14px;
}
}

但似乎在-88px以下的值下，徽标会出现波纹管标题并且不可见。有人可以给我说明如何解决这个问题吗？ Link来自存在问题的网站。

Answer 1

标题z-index低于你的计数div。

添加此样式并检查。你可以看到你的标志。

@media(max-width: 479px){
#header {   
    z-index: 999999;  
}
 .logo.is_logo.tip{
   margin: -40px auto 14px;
 }
}

Answer 2

解决方案涉及部分

Javascript - 这将用于将蓝色按钮移动到所需的标题位置。将使用if来使其仅在所需的宽度上工作。
CSS - 适应欲望外观的一些规则。媒体查询将使其仅适用于所需的断点

JSS

window.onload = function() { 
    if(window.innerWidth < 768){
        const sourceElement = document.getElementsByClassName('btn_calltoaction')[0]; 
        const destination = document.getElementById('header');; 
        destination.appendChild(sourceElement); 
    }
}

CSS

@media screen and (max-width: 768px) {
    a.btn_calltoaction {
    background: #070bf7;
    color: #ffffff;
    padding: 8px 25px;
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
    display: inline-block;
    color: #ffffff;
    padding: 7px 16px;
    line-height: 1;
    height: 10px;
    }

    header#header {
        display: flex;
            align-items: center;
    }

    .row.clr {
    order: 1;
    }

    #header > .row {
    background-image: url();
    border-style: solid;
    width: auto!important;
    }

    .mobile_nav.isOpen {
    right: 0;
    top: 110%;
    }
}

希望这有助于：）

将按钮旁边的徽标移动到Wordpress网站的移动视图中？

2 个答案: