-1

For example, I have two long (width wise) image banners I want to place on my shopify website in an HTML box but after all the answers and code I've found, I can't figure out how to retain their original sizes without ending up on top of each other vertically. I want them to reach each side of the webpage if possible. I also want them to be clickable links.

What I want:

|website side|| img | 5px padding | img ||website side|

What it looks like after trying various ways to adjust the % of the size (I dont think bounding boxes are going to help me for this):

|website side||img||website side| |website side||img||website side|

Example here of what I want to do: https://i.stack.imgur.com/PL0BL.png

I don't really know HTML well. I'm not sure if I need to set up some sort of CSS to make this happen. If I do, I don't know how to do that as the box on the website creation for shopify only accepts HTML code. I don't know if I need to create a snippet or something and where that would go.

If anyone can help me, I'd really appreciate it.

Ash
  • 6,483
  • 7
  • 29
  • 37
ip0wnn00bs
  • 1
  • 1
  • 1
    this question has a lot of duplicates on SO – dippas Jun 30 '18 at 22:14
  • 1
    Please help me find the right answer then because I can't find it anywhere on google for the life of me. I've looked on multiple websites and I just can't figure out how. I've tried all the kinds of code people have given and they won't work! :( – ip0wnn00bs Jun 30 '18 at 22:18
  • 1
    just did, look at the answer from this duplicate, – dippas Jun 30 '18 at 22:19
  • Thanks for the link to that! But to someone who only knows as far as inserting images into a webpage, that answer did not make sense to me at all.. I was hoping someone would be able to provide me with something I could use or an explanation of that answer... – ip0wnn00bs Jun 30 '18 at 22:24
  • 1
    see this https://www.google.com/search?q=image+side+by+side+site%3A+stackoverflow.com – dippas Jun 30 '18 at 22:27
  • Thanks. I figured out how to do it by using: https://www.w3schools.com/howto/howto_css_images_side_by_side.asp Then I just placed it in my index.liquid. – ip0wnn00bs Jun 30 '18 at 23:07

1 Answers1

1

If they are the same width and height like in your example, your html would look like: 

<img src="[source]" width="49%" style="display:inline;">
<div style="display:inline;width:5px;"></div>
<img src="[source]" width="49%" style="display:inline;">

Probably not the best way to do the width, but it works.

Logan George
  • 141
  • 8
  • Thank you. But that still doesn't solve the padding on the side of the webpage. It seems the images just won't go further to the left/right without modifying some file in my boundless theme. I was hoping there would be some sort of html to work around that as I want the images to be 100% of their size but not stack on top of each other vertically. – ip0wnn00bs Jun 30 '18 at 22:29
  • You could try float:left for one and float:right for the other and set the body margin to 0. If the two images are larger than the page's width, there is no way to keep them on the same line except resizing them. – Logan George Jul 02 '18 at 22:04