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

[TMartUS]

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

[Ninthony]

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

[TMartUS]

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

[Ninthony · 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>

[TMartUS]

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!

[Ninthony]

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.

[TMartUS]

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.

[Ninthony]

Not a problem, glad it helped.

[Babs1]

I want to do an image of 2 images side by side and I don't understand coding! Help? Thank you!

[BuonaFortuna]

this worked perfectly....I made a new page, then saved it....when I went to the PAGES heading I went to  the page i just made and then edited the HTML copy and pasted your code and it worked great.   How can JPGs not be supported here?   

[AGM_ND]

 

i would like these two images to sit side by side on the laptop and mobile view .. how do i do that ? I also would like to add an link to them when its clicked.please help. 

my site is https://agm-nd.myshopify.com 

no password

[slidepods]

Hi, thanks for the above. I have copied and it works in the custom liquid, but what bits do I change if I want to use a downloaded image?  Many thanks