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

klepham1014
New Member
6 0 0

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!

 

klepham1014_0-1613409251946.png

 

0 Likes
Pallavi
Shopify Expert
765 100 115


Hello There,

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


Thanks!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Jasoliya
Shopify Expert
4133 569 999

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;
}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
klepham1014
New Member
6 0 0

Thanks a bunch!

Kim

 

klepham1014_0-1613528888064.png

 

0 Likes
Jasoliya
Shopify Expert
4133 569 999

send your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
klepham1014
New Member
6 0 0

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

 

Thank you!

0 Likes
Jasoliya
Shopify Expert
4133 569 999

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; }

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes