Responsive boxes using "Custom html" blocks

Solved
Highlighted
Tourist
6 1 0

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

 

 

0 Likes
Highlighted

Hello @barch,

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

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Tourist
6 1 0

It's here: {REDACTED}

 

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

0 Likes
Highlighted
Tourist
6 1 0

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

0 Likes
Highlighted
Tourist
6 1 0

This is an 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;}
}

 

0 Likes
Highlighted
Tourist
12 0 2

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

 

 

0 Likes
Highlighted
Tourist
6 1 0

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!

0 Likes