Responsive boxes using "Custom html" blocks

[barch]

I have 3 elements made with Custom content > Custom html on the homepage using Debut theme. Each set to 33% so they stretch nicely on desktop.

They are simple images with text links positioned on the bottom.

HTML:

<div class="container-txt-img">
<img src="#" alt="Bespoke Design">
<div class="container-txt-img-bottom"><a href="#">Bespoke Design</a></div>
</div>

CSS:

.container-txt-img {
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
  color: black;
  font-size:24px;
}

.container-txt-img-bottom {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translate(-50%, -50%);
}

I can't figure out how to make these boxes responsive, the text is centered on mobile.

I've tried to implement solutions from other threads to no avail.

Got any ideas? TIA

[oscprofessional]

Hello @barch,

Please share your site url so that I will give you exact solution

[barch]

It's here: {REDACTED}

Edit: I've solved it, see answer below.

[barch]

I'm now thinking I may wrap up the whole image as clickable link if that's any difference, thanks.

[barch · Accepted solution]

OK I got. It in case anyone else needs to solve this here's what I've done.

In short I'm going to hide my 3 column custom HTML for mobile visitors. Then create 3 rows of custom HTML, each 100% width and show them on mobiles only.

HTML for desktop (Custom content block, containing 3x Custom HTML element set to 33% width):

<div class="container-txt-img">
  <img src="#" alt="Bespoke Design">
<div class="container-txt-img-bottom"><a href="#">Bespoke Design</a></div>
</div>

HTML for mobile (Custom content block, containing 3x Custom HTML element set to 100% width):

<div class="container-txt-img-mobile">
<img src="#" alt="Bespoke Design">
<div class="container-txt-img-bottom"><a href="#">Bespoke Design</a></div>
</div>

CSS:

.container-txt-img {
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
  color: black;
  font-size:24px;
}
.container-txt-img-bottom {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 425px) {
.container-txt-img{
display:none;}
}

@media only screen and (min-width: 426px) {
.container-txt-img-mobile{
display:none;}
}

[iMendez]

Hi Barch,

hope you're well.

I know this post is solved, but im trying to get my images to do the same. Just confused about where to put the CSS within the custom HTML code ive created. im pretty new to this.

https://lily-m-beauty.myshopify.com/ this is my url 

this is my password

prufri

Best wishes

[barch]

Hi @iMendez ,

CSS style goes into one of the theme files while HTML goes on the page where you want to display your images.

To get to the theme files, go to

Online Store > Themes > Customize

then on the bottom

Theme actions > Edit code

then search for "css" and paste the CSS on the bottom of theme.scss.liquid file.

Good luck!