[英]Paragraph not displaying in small screens
我有一个简单的页面宽度，背面有一个完整的出血图像，上面有一些文字。 在小屏幕上，我看到一个水平条显示，并且部分文本被隐藏了。
html { height: 100%; } body { background-image: url(FreeVector-Fresh-Beer.jpg); background-repeat: no-repeat; background-size: cover; } img { margin: auto; } .paragraph { text-align: center; margin-top: 5%; width: 100%; font-family: 'Alice', serif!important; color: #996633; } pa { color: #996633 !important; font-size: 35px !important; padding-top: 1%; } @media only screen and (min-device-width: 120px) and (max-device-width: 400px) { .paragraph { word-break: break-all; } }
<body class="jumbotron"> <figure> <img class="img-responsive" src="Craft-Beer-SA-min.png" alt="Chania"> </figure> <div class="paragraph" style="font-size:50px"> <p>Our Website Is Brewing ! ! !</p> <p>Coming To A Browser Near You. . . <br><a href="">info@me.co.uk</a> </p> </div> </body>
如何保持文本可见并删除滚动条？ 我又如何使背景图像具有响应性，以便在任何屏幕尺寸下都能看到它？
这是一个很好的解释： CSS媒体查询的最小宽度和最小设备宽度是否冲突？
device-width是指显示器的分辨率（例如1024 x 1024从1024x768），而width是指浏览器本身的宽度（如果浏览器未最大化，则与分辨率不同）。
附加参考： http : //www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
解：
代替min-device-width和max-device-width使用min-width和max-width 。
html { height: 100%; } body { background-image: url(FreeVector-Fresh-Beer.jpg); background-repeat: no-repeat; background-size: cover; } img { margin: auto; } .paragraph { text-align: center; margin-top: 5%; width: 100%; font-family: 'Alice', serif!important; color: #996633; } pa { color: #996633 !important; font-size: 35px !important; padding-top: 1%; } @media only screen and (min-width: 120px) and (max-width: 400px) { .paragraph { word-break: break-all; } }
<body class="jumbotron"> <figure> <img class="img-responsive" src="Craft-Beer-SA-min.png" alt="Chania"> </figure> <div class="paragraph" style="font-size:50px"> <p>Our Website Is Brewing ! ! !</p> <p>Coming To A Browser Near You. . . <br><a href="">info@me.co.uk</a> </p> </div> </body>
我想在带有Google Adsense横幅的小屏幕上调整我的段落
[英]I want to adjust my paragraph on small screens with google adsense banner
在小屏幕上将标题和段落的左侧图像对齐，然后在它们之间对齐
[英]Align image left of title and paragraph then between them in small screens
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.