Why does my form not stay in its column

Solved
Highlighted
Excursionist
21 2 0

Hi all

 

I have a popup that shows both a photo gallery for products and a submission form where people can submit there photos with the products to be put in the gallery. Issue is that for some reason my form wont stay to right of the photo gallery and instead just goes below it. I have set up two columns where the left column holds the photo gallery taking up 75% of screen and the right column holds the submission form taking up 25% of screen. what seems to happen is the form still takes up only 25% of screen but doesnt sit where its supposed to sit even though I have placed it in the right column. If you are wondering I am using magnific popup for my popups if this info helps. Below is the code for how my items are placed and structured inside the popup, I am using a shopify app called "Acerill Custom Forms for the creation of the form.

 

html code in product-template.liquid

 

<div id="Image-Gallery" class="mfp-hide">
  
  
  <div class="row">
  <div class="gallerycolumn"></div>
  <div class="gallerycolumn"></div>
</div>
  
  
  <div class="row">
  <div class="galleryleft" style="background-color:#000000;">
	{{ description_arr[1] }}
        
  </div>
  <div class="galleryright" style="background-color:#000000;">
    <div class="acerill-custom-form" data-form-id="ca3d163c-517f-4dda-8e8c-202a1cb2e3dc"></div>
<script type="text/javascript" src="https://custom-forms-client.acerill.com/js/custom-forms-v2.js"></script>
  </div>
</div>

</div>

  
<style>
#image-gallery {
  border: 2px #555 solid;
  background-color: #ffffff;

  max-width: auto;
  margin-left: auto;
  margin-right: auto;
}
</style>

 

 

css code

 

  .gallerycolumn {
  float: left;
}

.galleryleft {
  width: 75%;
}

.galleryright {
  width: 25%;
}

 

 

here is a picture of how the form acts when the popup is opened...

 

Inked1_LI.jpg

 

You can also see in the picture that I cant get my photo gallery to work. If you want to answer my question on how to get the photo gallery to work you can go to my other asked question here at the link below

 

https://community.shopify.com/c/Shopify-Discussion/Why-does-this-code-fail-to-work-when-being-called... 

 

I greatly appreciate all the support.

 

Kind Regards

0 Likes
Highlighted

Success.

Excursionist
21 2 0

Found the answer to my problem...

Easy fix just needed to add floats to my contents in the columns to force them to the left and the right

 

below is how I fixed my code. It was just a small update to my css code

 

Updated css code

 

  .gallerycolumn {
  float: left;
}

.galleryleft {
  width: 75%;
  float: left;
}

.galleryright {
  width: 25%;
  float: right;
}

 

 

if anyone can solve my other issue with the gallery feel free to do so at the link below

https://community.shopify.com/c/Shopify-Discussion/Why-does-this-code-fail-to-work-when-being-called... 

0 Likes