How to add Side-By-Side Images in Custom HTML Section of the Warehouse theme

Solved
PAV1
Tourist
11 0 2

The Warehouse them has a Custom HTML Section that lets you add custom HTML to the home page. I would like to use this to add a section of Side By Side Images of equal size with some space in between them. These images should maintain their proportions at all times and should stack up on top of each other in mobiles.

Can anyone please help me with this?

Thanks


Screen Shot 2021-01-26 at 11.01.49 AM.png

0 Likes
Ninthony
Shopify Partner
1637 224 615

https://codepen.io/ninthony/pen/zYKgwPQ

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
PAV1
Tourist
11 0 2

Hello Ninthony,

First of all, thank you so much for replying!

Using the Custom HTML section, I can easily add the HTML code. However, I'm not entirely sure where to post the CSS code. If you need me to add the HTML first to activate that section, I can certainly do that for you.

Also, if it's not too much to ask, can we add a link to each image?

Much appreciated!

Regards

0 Likes
Ninthony
Shopify Partner
1637 224 615

This is an accepted solution.

You can add the CSS directly in the custom HTML section at the top of the page. If you copy and paste this into there it should work. I added links to google for each image, so just change that to whatever you need.

<style>
*
{
  box-sizing: border-box;
}
body {
  margin: 0;
}
.image-container {
  display: flex;
  width: 100%;
}
.image {
  width: 50%;
  padding: 15px 15px;
}
.image img {
  width: 100%;
}
@media(max-width: 767px) {
  .image-container {
    flex-direction: column;
    align-items: center;
  }
  .image {
    width: 100%;
  }
}
</style>
<div class="image-container">
  <div class="image image1">
    <a href="https://www.google.com">
    <img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12193133/German-Shepherd-Puppy-Fetch-500x500.jpg">
    </a>
  </div>
  <div class="image image2">
  <a href="https://www.google.com">
    <img src="https://chadwicksgoldens.com/wp-content/uploads/2015/02/D8H_0766_9-500x500.jpg">
    </a>
  </div>
</div>

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
PAV1
Tourist
11 0 2

It works! Thanks so much Ninthony. The only thing I'm trying to figure out is this margin/padding there is at the top of the container. It seems like the section has some margin as well as the container, which makes it excessive. Ideally, we would only have the section padding as it is standard amongst all other sections in the theme.

I don't seem to locate any css code of margin or padding in what you provided, so I wouldn't know how to go about removing that space.

If you could help me with this last thing it would be great. If not, no problem. Thanks so much for helping me out. I will be marking this as a solution.

Kind regards!

 

Screen Shot 2021-01-26 at 12.44.01 PM.pngScreen Shot 2021-01-26 at 12.44.28 PM.png

0 Likes
Ninthony
Shopify Partner
1637 224 615

I couldn't tell you that exactly, it appears to be part of your theme's code. It looks like you have the HTML inspector open, in the top right corner next to "Styles" open the "Computed" tab while you have the element you want to inspect selected. There'll be a list of properties that are applied to that element. Look for margin, and click the dropdown arrow, then hover the value and another little arrow should pop up next to it. If you click that arrow, it'll take you to where the property is set, and if you want to override it you'll just have to copy the identifier for the element (class name, id, whatever is used to apply the style), and then overwrite that css with new css at the bottom of your style sheet.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
PAV1
Tourist
11 0 2

IT WORKED! Thank you Ninthony for taking the time to write all of this out. I had posted something about it earlier and I did not receive any replies, so thank you really.

 

0 Likes
Ninthony
Shopify Partner
1637 224 615

Not a problem, glad it helped.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D