Edit codepen from Bastian: https://codepen.io/Bastian2001/pen/GRoGrrY
I've made a web page with 4 tall pictures in a row with captions underneath. I'm trying to get the the images to stack into a 2x2 square grid with captions, after the window width has been decreased to a certain px size.
I tried to set the image blocks to take up 50% of the width but I'm pretty sure I'm not using that correctly as the positions mess up pretty badly.
@media (max-width: 1020px) {
.imgServicesBlock {
width: 50%;
}
The captions widths and heights also go crazy and don't line up properly at certain window sizes. I tried using the @media to edit the font size which didn't seem to work either.
Lastly, at full screen the images aren't lining up horizontally when certain captions have more text lines.
Apologies for all the questions and roughness of the code.
Thanks in advance for any help!
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>
!!!!Edit codepen from Bastian: https://codepen.io/Bastian2001/pen/GRoGrrY
working example of what you are trying to achieve: https://codepen.io/Bastian2001/pen/qBbKRXV
CSS grid can help (this question of mine from a couple of years ago might help you ;))
Inside your media query you would then have to set the parent's grid-template-column property to 2 (with the value outside the media query being 4), allowing this kind of behaviour that you are after.