Displaying code blocks as 2 columns in mobile view

Site URL: https://www.thewordlady.co.uk/

Ok I'm totally out of my depth on all types of code and I'm winging it massively. I have a couple of key issues that I'm really hoping someone can help with? 

1. I found a way to use code blocks to create an image hover effect where the text disappears on hover and a new image is displayed (most examples have the text appear on hover, but I wanted it the other way round). Anyway, I like the way the 6 code blocks look on desktop/tablet – 2 rows / 3 columns but I can't get them to display as 2 columns for mobile (instead of stacked on top of each other). I would like 3 rows / 2 columns for mobile.

2. I've messed about with the original html code I found and now can't work out how to keep my text relative to the size of the image – so have set it at 30px or something but I think this means it's not contained inside the image on some screens and I want it to just get larger or smaller depending on the size of the image in whichever viewport is being used. 

I hope that makes sense? 

Just to give an idea of the level you're dealing with here – I don't really know the difference between html and css and am just faffing around and hoping stuff works.

This is the css I've got and I honestly don't even know if I need all this or if I've just left random bits in from various different Google results...

.overlay-image {
  border: 1px solid #fff;
  padding: 0px;
  width: 100px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0), 0 4px 6px 0 rgba(0, 0, 0, .3);
}

/* Main container */
.overlay-image {
position: relative;
width: 100%;
}

/* Original image */
.overlay-image .image {
display: block;
width: 100%;
height: auto;
}

/* Original text overlay */
.overlay-image .text {
color: #fff;
font-size: auto;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:80%;
}

/* New overlay on hover */
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}

/* New overlay appearance on hover */
.overlay-image:hover .hover {
opacity: 1;
}

.overlay-image .normal {
transition: .5s ease;
}
.overlay-image:hover .normal {
opacity: 0;
}
.overlay-image .hover {
background-color: rgba(0,0,0,0.5);
}

.container {
  position: relative;
  text-align: center;
  color:white; }

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Thanks in advance to anyone who can help me with this because I'm seriously losing brain cells trying to figure it out. If anyone can recommend a really great coding for beginners course I'd really appreciate it. 

Thank you. 

Have you solved yet?

No, not yet. 

33 minutes ago, qwerty456 said:

No, not yet. 

show about, digital, copyriting 2 columns/row on mobile?

At the moment, it goes from desktop:

1 - 2 - 3

4 - 5 - 6

to mobile:

1

2

3

4

etc

What I would like is that on mobile it goes to 

1 - 2

3 - 4

5 - 6 

You can't change current layout to 2 items/row on mobile.

about - portfolio

digital - testimonials

print - contact

However, to do this, you also need to adjust a bit of items. Not sure how to explain it, I am looking for instructions from Squarespace, to see how they explained ...

--

I see you used Code Block to create hover.

You can create this effect with Poster Block, or Image Inline Block.

I don't think I can create the effect with poster/imagine inline in a way that shows the word on the first image but changes the image/removes the word for the hover, can I? 

4 hours ago, qwerty456 said:

I don't think I can create the effect with poster/imagine inline in a way that shows the word on the first image but changes the image/removes the word for the hover, can I? 

Hover effect with Image Blocks. https://turquoise-asparagus-ylha.squarespace.com/image-box-06?password=abc

Password: abc

Thank you!