求助：WordPress Twenty Thirteen主题移动端Logo显示被截断

Hey there! Let's tackle that mobile logo truncation issue you're facing with the Twenty Thirteen theme. I've looked at your current CSS and the site setup, here are some targeted fixes and reasoning behind them:

1. 先确保Logo图片本身支持自适应 #

Logo截断最常见的原因就是图片没有随容器宽度缩小。添加这段CSS强制图片自适应容器：

.site-header .home-link img {
    max-width: 100%;
    height: auto;
    display: block;
}

这样能保证Logo永远不会超出父容器的宽度，同时保持自身比例，避免被生硬截断。

2. 调整Header容器的内边距与固定高度 #

你当前的代码设置了min-height:130px!important和padding:20px——在小屏移动设备上，内边距会挤占Logo的显示空间，固定的最小高度也无法适配不同屏幕尺寸。试试用媒体查询针对移动端优化：

@media screen and (max-width: 600px) {
    .site-header .home-link {
        min-height: auto !important; /* 移除固定高度，让容器随内容自适应 */
        padding: 10px; /* 减少内边距，给Logo腾出更多空间 */
        text-align: center; /* 确保Logo居中显示 */
    }
}

去掉固定最小高度后，容器会根据Logo的尺寸自动调整，减少内边距也能避免空间浪费。

3. 检查是否存在隐藏溢出设置 #

有时候父元素会设置overflow:hidden，导致超出容器的内容被截断。你可以用浏览器开发者工具（F12）查看.site-header或.home-link元素是否开启了这个属性，如果有，在移动端视图下将其改为overflow:visible或者直接移除。

快速调试小技巧 #

用浏览器开发者工具（Chrome按Ctrl+Shift+M切换移动端视图）检查Logo和它的容器。查看盒模型，看看有没有意外的外边距、内边距或宽度限制导致截断。你可以在工具里实时测试CSS修改，找到最适合你网站的配置。

内容的提问来源于stack exchange，提问作者anita