徽标调整响应式opencart

Question

我努力想要解决这个问题。基本上我的网站stagstores.co.uk是一个基于开放的商业网站，并使用自定义主题。

我的问题是徽标（标题）没有响应，页面的其余部分是。

当我在移动设备中调整页面或视图的大小时，一切都会与徽标区分开来。

我希望在调整页面大小时将徽标更改为另一个尺寸徽标，我查看代码并想出如何自动扩展徽标，这基本上只是将其压缩到设定宽度但这不是我想要的只是想要公司徽标部分出现。

有关如何修复的任何建议吗？

Answer 1

您可以通过向style.css添加媒体查询来解决此问题。

@media(max-width: 330px){
  #yourimage_id{
     width: 30px;
     height: 30px;
  }
}

只需为每个标准分辨率添加它，因此徽标尺寸适合正确的设备/屏幕宽度。

要获得公司徽标，将图片分成三个单独的图标可能是一个明智的想法，因为它使响应更容易。

解决方法是将图片设置为div的background-image，并使用background-position属性，以便获得所需图片的一部分！

Answer 2

我强烈建议您将徽标拆分为自己的图像，与电话和传送部分相同，这样当视口变小时，图像可以叠加在一起。

你需要％宽度才能让它们响应，但由于你的标题图像太宽，添加它会意味着它们会变得非常小。您还应该使用上面提到的媒体查询。

目前，您在100％图片上的宽度不会生效： https://i.imgsafe.org/6497dcec18.png

解决此问题会使您的徽标/标题图像响应。