css - 网站页面挤压影响文本框架

标签 css wordpress web smartphone

有人可以帮我解决这个 wordpress 网站页面上的文本框架的建议 http://www.blackcoatinnovations.com/#third

如果浏览器大小合适,格式看起来不错,但一旦缩小,文本框和图片就会被挤压。

有趣的是,如果你挤压它很多,那么文本框会改变方向,一个在另一个上面,这就是它在智能手机上的样子,所以如果可能的话我不想毁掉这个手机友好的功能。但是有没有办法避免文本框架困惑的“介于两者之间”的情况?

最佳答案

这是因为它具有响应能力,并且会根据可用屏幕空间的百分比进行调整。如果您在此处查看您的 Bootstrap css 文件:http://www.blackcoatinnovations.com/wp-content/themes/BootstrapParallax/css/bootstrap-responsive.css ,您可以设置响应触发应该发生的位置。

所以你有 @media (min-width: 768px) 和 (max-width: 979px)

这意味着直到它达到 767 的宽度(比最小宽度小一个),它会挤压,然后一旦它达到 767 - 转到手机布局。如果您在此行上将最小宽度设置得更高,并在下一个媒体查询中将最大宽度设置得更高,您可以让它捕捉到您想要的位置。

还有其他方法,但这是一个快速修复。

关于css - 网站页面挤压影响文本框架,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21501659/

相关文章:

html - CSS:正文中的字体系列不适用于页面上的任何内容

jquery - 更改 jquery 数据表中排序列的默认类?

css - 除非 style.css 改变,否则 Ember-cli 构建生产会出错

javascript - 平滑滚动超调 Visual Composer Wordpress

css - 在 Wordpress 中为图像和标题设置样式(如果存在)

javascript - 为什么域在谷歌分析中被散列?

json - httr GET 函数读取表

html - 悬停时的图像与粘性标题重叠

javascript - 使用scrollTop检测滚动

javascript - 将 Revolution Slider 5+ 图层设置为静态图层