Отредактируйте код от Bastian: https://codepen.io/Bastian2001/pen/GRoGrrY
Я создал веб-страницу с 4 высокими картинками в ряд с подписями под ними. Я пытаюсь объединить изображения в квадратную сетку 2x2 с надписями после того, как ширина окна была уменьшена до определенного размера в пикселях.
Я попытался настроить блоки изображений на 50% ширины, но я почти уверен, что использую это неправильно, так как позиции довольно сильно портятся.
@media (max-width: 1020px) {
.imgServicesBlock {
width: 50%;
}
Ширина и высота подписей также go сумасшедшие и не выстраиваются должным образом при определенных размерах окон. Я попытался использовать @media для редактирования размера шрифта, который, похоже, тоже не работал.
Наконец, в полноэкранном режиме изображения не выстраиваются по горизонтали, когда в некоторых заголовках больше текстовых строк.
Приносим извинения за все вопросы и грубость кода.
Заранее благодарим за любую помощь!
CSS
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
color: black;
letter-spacing: .18em;
min-width: 400px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
/* This section is for the services page */
.gmSectionText {
text-align:center;
width: 20vw;
Height: 80px;
max-height: 450px;
max-width: 230px;
color:#808080
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
background-color: white;
}
.propSectionText {
text-align:center;
width: 20vw;
Height: 80px;
max-height: 450px;
max-width: 230px;
color:#808080
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
background-color: white;
}
.fluidSectionText {
text-align:center;
width: 20vw;
Height: 80px;
max-height: 450px;
max-width: 230px;
color:#808080
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
background-color: white;
}
.sandSectionText {
text-align:center;
width: 20vw;
Height: 80px;
max-height: 450px;
max-width: 230px;
color:#808080
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
background-color: white;
}
.imgServicesContainer {
text-align:center;
margin-top: 30px;
display: inline;
}
.imgServicesBlock {
width: 20vw;
Height: 35vw;
/*max-height: 500px;*/
/*max-width: 300px;*/
max-height: 450px;
max-width: 220px;
display: inline-block;
margin-right: 22px;
margin-left: 22px;
object-fit: cover;
background-color:red;
transition: transform .2s;
}
.imgServicesBlock:hover {
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari 3-8 */
transform: scale(1.1);
}
.imgServices {
width: 100%;
height: 100%;
border-style: solid;
border-color: white;
border-width: 5px;
margin-left: auto;
margin-right: auto;
object-fit: cover;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 60px;
color: white;
}
/*This bit removes the cakes in the name if the window is too small"*/
@media (max-width: 700px) {
.edit-name{
display: none;
}
}
/*Removes the tel and email when window is narrow */
@media (max-width: 1230px) {
.narrow-hide{
display: none;
}
}
@media (max-width: 1020px) {
.imgServicesBlock {
width: 50%;
Height: 35vw;
max-height: 200px;
max-width: 200px;
display: inline-block;
margin-right: 22px;
margin-left: 22px;
object-fit: cover;
transition: transform .2s;
font-size: 5px;
}
}
@media (max-width: 420px) {
.imgServicesBlock {
width: 50%;
Height: 35vw;
max-height: 20px;
max-width: 20px;
display: inline-block;
margin-right: 11px;
margin-left: 11px;
object-fit: cover;
transition: transform .2s;
font-size: 3px;
}
.propSectionText {
font-size: 3px;
}
}
HTML
<div id="fullpage">
<section class="vertical-scrolling" style="background-color: #f5f5f5";>
<h3 style="display:block; margin-top: 50px; margin-left:auto; margin-right:auto; margin-bottom: 20px; overflow-wrap: anywhere; width: 690px; color:#808080">OUR SERVICES</h3>
<p style="color:#808080; margin-bottom:40px; font-size: 25px; word-wrap: break-word;">Click on the images below to learn more about our services<p>
<div class="imgServicesContainer">
<div class="imgServicesBlock">
<a href="https://www.google.com/" style="color:#808080">
<img class="imgServices" src="..\Website Design Pics\Colour_Block.jpg" alt="blue">
<div class="gmSectionText">
<p>blah blah here here and you</p>
</div>
</a>
</div>
<div class="imgServicesBlock">
<a href="https://www.google.com/" style="color:#808080">
<img class="imgServices" src="..\Website Design Pics\Colour_Block.jpg" alt="blue">
<div class="propSectionText">
<p>words and things are good to type to fill in the silence</p>
</div>
</a>
</div>
<div class="imgServicesBlock">
<a href="https://www.google.com/" style="color:#808080">
<img class="imgServices" src="..\Website Design Pics\Colour_Block.jpg" alt="blue">
<div class="fluidSectionText">
<p>dogs are great to walk and pet. Awesome! I have 4 and also a parrot.</p>
</div>
</a>
</div>
<div class="imgServicesBlock" style="margin-right: 50px;">
<a href="https://www.google.com/" style="color:#808080">
<img class="imgServices" src="..\Website Design Pics\Colour_Block.jpg" alt="blue">
<div class="sandSectionText">
<p>hi and there text to sample</p>
</div>
</a>
</div>
</div>
</section>
</div>
!!!! Редактировать код от Bastian: https://codepen.io/Bastian2001/pen/GRoGrrY