To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Responsive boxes using "Custom html" blocks

Solved
barch
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

 

 

Accepted Solution (1)

Accepted Solutions
barch
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;}
}

 

View solution in original post

Replies 6 (6)
oscprofessional
Shopify Partner
13773 2097 2692

Hello @barch,

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

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify App | Custom Pricing Wholesale App | Shopify SEO | Digital Marketing | Shopify Strategies Consultant
barch
Tourist
6 1 0

It's here: {REDACTED}

 

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

barch
Tourist
6 1 0

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

barch
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;}
}

 

iMendez
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

 

 

barch
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!