在移动视图中如何在框中缩放书写？

Question

我正在建立这个博客：wolpertinger.org并且在移动视图中的博客条目部分存在问题。 我试图让它们像滑块顶部的那些一样，但由于某种原因，盒子里的文字（例如Pissapocalypse - 新西兰的水危机）没有采取正确的尺寸。 我只是希望它相应地缩放，因此方框中的文字在手机上和普通笔记本电脑屏幕上一样可读。

这是我用于该部分的代码。 请记住，我是HTML的新手，因此代码可能有点混乱。 它是模板，来自其他片段的复制粘贴和我自己的东西的混合。

无论如何，我真的很感激任何帮助。 我已经玩了很多但是无法弄清楚为什么它不起作用。

谢谢，

克里斯

 .context { overflow: hidden; position: relative; } .image-wrap .image-info{ text-align: center; position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0.8 -webkit-transition: .3s all ease-in-out; -o-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .context:hover .overlay { opacity: 1; .centered { text-align: center; position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .boxed { border: 2px solid rgba(233,233,233,1.00) ; padding-left: 0px; padding-right: 0px; text-align: inherit; position:inherit; } .btn-outline-white123 { border-color: #fff; color: #fff; border-width: 2px; text-transform: uppercase; font-size: 14px; letter-spacing: .2em; } .btn-outline-white123:hover { background: #fff; color: #000; } .btn { border-radius: 0; } .btn:hover, .btn:active, .btn:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } 

 <div class="context"> <div class="image-wrap"> <img id="imgdarkblog" src="images/NewZealand/16.jpg" width="80%" height="auto" alt="Image" class="img-fluid mx-auto d-block webkit-filter: brightness(100%)"> <div class= "image-info "> <div id="div0" class="overlay"> <div class="centered boxed "> <a href="Blog_Pissapocalypse.html" class="btn btn-outline-white123"> <span > The Pissapocalypse - New Zealand's water crisis</span> </a> </div> </div> </div> </div> </div>