Buy Button HTML Code not displaying buy button (Dawn Theme)

[Peter_Brahan]

Hi!  For some reason I can't get the buy button to display on this page.  I used the HTML generator from Shopify, and it works when I have the images set to small, but for medium and large it doesn't show.  Any advice would be appreciated!

Here is the page to test this.

https://www.justgotravelstudios.com/pages/test-page-for-various-html-code 

[NomtechSolution]

If the Buy Button generated by Shopify is not displaying on your page when the images are set to medium or large size, there might be a CSS issue or conflicting styles that are affecting the visibility of the button. Here are a few troubleshooting steps you can try:

1. Check the CSS styles: Inspect the elements on your page using the browser's developer tools (right-click on the page and select "Inspect" or "Inspect element"). Look for any CSS styles that might be affecting the visibility of the Buy Button or its container. Make sure there are no conflicting styles or hidden elements that are preventing the button from displaying.

2. Adjust the container size: If the Buy Button is not visible when the images are set to medium or large size, it could be due to the container size being too small. Check the dimensions of the container where you have placed the Buy Button and ensure that it has enough space to accommodate the button. You may need to adjust the container size or the surrounding elements to make room for the button.

[Peter_Brahan · Accepted solution]

I did find this when I was investigating it further in my base.css file.  I have a hunch it's the "iframe{max-height: 500px;} that's doing it.  not sure what the impact is if I increase this but I'm going to give it a shot and see if it has any impact on anything else.  

  /*limit the width of all iframe or YouTube iframes to the width of the screen rather than the default*/
  iframe{max-width: 100%;}
  /*limit the height of all iframes to be 500 px rather than squeezing the iframe box to be super high and narrow on mobile-has to be over 454px for pinterest to show up properly*/
  iframe{max-height: 500px;}