图片无法在移动设备上正确显示

Question

我有一个网站正在尝试使它更适合移动设备使用（http://realnewsline.com/）。我遇到的问题是，网站顶部的三个主要图像在移动设备上被切断，其中一两个无法查看。有什么办法可以在Wordpress或某些CSS中解决此问题？谢谢！

Answer 1

首先，您的.image-wrap div具有内联样式属性，该属性将宽度设置为300px。如果将其删除，图像将缩放以适合设备。

为避免列变小而在屏幕上消失，可以使它们自动换行。当前，.featured-wrap元素的宽度设置为33％（通过body #wrapper #featured .featured-wrap）和100％（在.featured-wrap中）。我建议在其父元素（display: flex; flex-wrap: wrap;）上使用#featured属性，为.featured-wrap元素赋予一个绝对值（例如300px，请确保删除其他宽度属性）。

以下是有关弹性显示模式的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/我发现它非常有用。