注意：本修改将不会在手机及平板界面（包括模拟电脑页面下）显示音乐播放器及相关按钮，即只会在PC电脑端显示。

事情的起因是前几天把网站给改成了半透明，为了匹配帅气的黑悟空背景图。没设置背景图之前网站看不出来什么，设置完之后老乡子夜松声和大美女钟MM给出了非常中肯的建议，我的理解是网站主要区域左右和底部页边距过长，如图所示。

经过一下午的迷茫，发现主要的修改文件在pix/inc/assets/css/main.css，废话不多说，开整。

因为改的比较多，直接说多少行可能会有不小出入，所以不再提及，直接搜索。

先改左右页边距。

1、找到如下代码：

.main_body {
    position: relative;
}

更改为以下代码，这一步就是直接加宽左右页边距，并让手机平板自适应。

.main_body {
    position: relative;
    margin: 0 -200px;
}

@media (max-width: 768px) {
    /* 针对手机和平板等小屏幕设备 */
   .main_body {
        position: relative;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* 针对中等屏幕设备（例如部分平板） */
   .main_body {
        position: relative;
        margin-left: -10%;
        margin-right: -10%;
    }
}

2、更改后会发现，虽然页边距增加了，但是主题的左边菜单部分和右边的评论部分非常的不协调，继续调整。

找到如下代码：

body.mod_third .left_nav {
    width: 25%;
}

以及

body.mod_third .main_sidebar {
    width: 25%;
    display: block;
}

把两段代码里面的25%都改成20%。

改完这一步，你会惊奇的发现，右下角的快速返回顶部和音乐播放器按钮以及歌词按钮不见了，原来是因为加宽被掩盖了。继续修改：

找到以下代码：

a.go_top {
    position: absolute;
    right: -45px;
    padding: 7px;
    display: flex;
    line-height: 1;
    background: #22bb6d;
    color: #fff;
    border-radius: 8px;
    bottom: 20px;
    opacity: 0;
    transition: all .15s;
}

以及

.footer_tool {
    position: absolute;
    right: -45px;
    display: flex;
    bottom: 70px;
    flex-direction: column;
}

把里面right: -45px中的-45改成-150，或者根据你自己的需要修改成合适的数值。

页面加宽了，正下方的音乐播放窗口有些错位，小小纠正一下。

找到以下代码：

.footer_nav_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    background: rgb(255 255 255 / 80%);
    border-top: 1px solid #edf3f0;
    position: absolute;
    right: 0;
    top: 0px;
}

right: 0中的0修改为-100px。

再打开pix/inc/assets/css/uikit.min.css，找到如下代码：

.uk-width-1-3\@m{width:calc(100% * 1 / 3.001)}

3.001修改为4.501，这样，下方的播放器就完全居中了。

如果你之前修改过主题，添加的有歌词显示，可以继续修改下歌词的显示位置：

在后台，PIX主题设置---扩展设置---底部HTML代码，可以参考我现在的代码：

  //桌面歌词css（按照下面格式自行修改）
    position: 'fixed',
    bottom: '0',
    left: '6%',
    width: '280px',
    height: '70px',
    overflow: 'hidden',
    zIndex: '999',
    pointerEvents: 'none',
  } : 

接下来改底部页边距。

1、找到如下代码：

.footer_main {
    position: relative;
    width: -webkit-fill-available;
    width: -moz-available;
    padding: 0 10px;
    padding-bottom: 100px;
    z-index: 988;
}

将padding-bottom: 100px;里的100px更改为50px。

2、修改pix/inc/assets/css/mobile.css，让手机和平板底部页边距也变窄。

找到如下代码：

.footer_main {
        position: relative;
        padding-bottom: 110px;
    }

将110px更改为60px，或你自己喜欢的大小。

改后就是本站现在的演示。

我印象中是调整了这些地方，如果和本站演示不同，留言回复。