Minimal Theme: I'm trying to make 2 input fields to be on the same line

[klepham1014]

I've been trying to update my product.liquid file to make the 2 input fields on the same line.  Currently, it's on separate line but nothing is working.  Please help.  Thank you!

[Pallavi]

Hello There,

Please share your store URL.
So that I will check and let you know the exact solution here.

Thanks!

[Jasoliya]

For that you have to change code for boxes.

follow this:

1. open your section ->product-template and find your box code.

2. you have to add parents class on  two box which you want in same line

so it look like something:

<div id="block_container">
  <div class="block">box 1</div>
  <div class="block">box 2</div>
</div>

<div id="block_container">
  <div class="block">box 3</div>
  <div class="block">box 4</div>
</div>

3. then add this css in theme.scss file at bottom:

 #block_container {
    display: flex;
    justify-content: center;
}

[klepham1014]

Hi Jasoliya,

I followed your direction and it's working for me.  Thank you for your help.  Do you know if it's possible for me to add the label on top of the box instead of side of the box? Or as least add a space between the label and the input box.

Thanks a bunch!

Kim

[Jasoliya]

send your store url

[klepham1014]

My URL:  https://vos-bijoux-us.myshopify.com/   

Thank you!

[Jasoliya]

Its very difficult to manage to do just by css without changing html.

but try this code i did may be work:

div#block_container { display: grid; grid-template-columns: 50% 50%;grid-column-gap: 10px; }
div#block_container label[for="name1"],div#block_container label[for="name2"] { grid-area: 1 / 1 / span 1 / span 1; }
div#block_container input#name1,div#block_container input#name2 { width: 100% !important; grid-area: 2 / 1 / span 1 / span 1; }
div#block_container label[for="namemonth1"],div#block_container label[for="namemonth2"] { grid-area: 1 / 2 / span 1 / span 1; }
div#block_container #namemonth1,div#block_container #namemonth2 { width: 100% !important; grid-area: 2 / 2 / span 1 / span 1; }