Change Text and contact form side by side

HewittShophere
Tourist
8 0 1

HewittShophere_0-1599072535867.png

What code or methods do I use to make the text side by side? I am using the pipeline theme.

 

Please and thanks

 

https://es3v7yla23rylj65-46142587048.shopifypreview.com here is the website

 

Replies 41 (41)

JHKCreate
Shopify Expert
3571 639 916

Hi There!


To do that you have to first create a parent <div> then create two <div> with 50% width each and the place the relevant content in each. 

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @HewittShophere 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
HewittShophere
Tourist
8 0 1

https://es3v7yla23rylj65-46142587048.shopifypreview.com

 

Here is the website, and very new to coding

KetanKumar
Shopify Partner
36839 3635 11972

@HewittShophere 

Thanks for the store URL.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 769px) {
#contact-us .grid__item div {
    float: left;
    width: 50%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
HewittShophere
Tourist
8 0 1

hello, will this be added to all the pages/throughout the whole website

or just the page.contact / contact page ( contact us page)

Just want to make sure as I only need it to be side by side for just one page?

:0

KetanKumar
Shopify Partner
36839 3635 11972

@HewittShophere 

code apply to only contact page

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
HewittShophere
Tourist
8 0 1

You're a life saver thank you!

Muhammad11
Tourist
9 0 4

I added your code but it looks like this can you help?Screenshot 2021-07-01 at 9.35.18 PM.png

KetanKumar
Shopify Partner
36839 3635 11972

@Muhammad11 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Muhammad11
Tourist
9 0 4

My website is not live yet. It's in process. I'm using a Minimal theme. I just want to add side by side pattern on the contact page. like contact form should be on left and all the text should be on right.

 

KetanKumar
Shopify Partner
36839 3635 11972

@Muhammad11 

oh i see not an issue please share store preview url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Muhammad11
Tourist
9 0 4
KetanKumar
Shopify Partner
36839 3635 11972

@Muhammad11 

can you please share contact  page code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Muhammad11
Tourist
9 0 4

Here is the code:

 

<div class="grid">

<div class="grid__item post-large--two-thirds push--post-large--one-sixth">

<div class="section-header">
<h1 class="section-header--title">{{ page.title }}</h1>
</div>

<div class="rte">
{{ page.content }}
</div>

<div>

{% form 'contact' %}

{% if form.posted_successfully? %}
<p class="note form-success">
{{ 'contact.form.post_success' | t }}
</p>
{% endif %}

{{ form.errors | default_errors }}

{% assign name_attr = 'contact.form.name' | t | handle %}
<label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
<input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}">

<label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
<input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">

{% assign name_attr = 'contact.form.phone' | t | handle %}
<label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

<label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>

<input type="submit" class="btn right" value="{{ 'contact.form.send' | t }}">

{% endform %}

</div>
</div>
</div>

KetanKumar
Shopify Partner
36839 3635 11972

@Muhammad11 

Yes, please confirm this look

KetanKumar_0-1625223111758.png

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Muhammad11
Tourist
9 0 4

It's perfect. You're a Gem. but can you guide me on how to switch sides too by myself? like if I want the Text on left and Form on right?

 

Muhammad11
Tourist
9 0 4

Screenshot 2021-07-02 at 11.39.03 PM.png

can we achieve this layout?

Muhammad11
Tourist
9 0 4

Screenshot 2021-07-02 at 11.39.03 PM.png

can we make this please?

KetanKumar
Shopify Partner
36839 3635 11972

@Muhammad11 

yes please change content as per you code we don't control your admin so please update custom code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Beytibyarabesqu
Explorer
47 0 19

@KetanKumar 

I am using Debut theme and I have 2 forms in the two different pages below:

https://beytibyarabesque.com/pages/special-orders

https://beytibyarabesque.com/pages/contact-beyti

 

I would like to be able to put the text and forms side by side in those 2 pages, is that doable?

 

Thanks,

M

KetanKumar
Shopify Partner
36839 3635 11972

@Beytibyarabesqu 

yes please add 2 form code at one page so i will check and update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Beytibyarabesqu
Explorer
47 0 19

How can I do that? @KetanKumar 

KetanKumar
Shopify Partner
36839 3635 11972

@Beytibyarabesqu 

yes please add code contact template 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Beytibyarabesqu
Explorer
47 0 19

@KetanKumar do you mean like the screenshot below: Online store > Theme template > Contact ? I did that for the Contact Page

But for the Special Order page, I have another form than the Contact page...should I do the same?

Beytibyarabesqu_0-1637098663402.png

 

KetanKumar
Shopify Partner
36839 3635 11972

@Beytibyarabesqu 

no sorry your have add code backend code contact template

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Beytibyarabesqu
Explorer
47 0 19

@KetanKumar is there a way you show me how to do that with a screenshot? i am not sure i understood

thanks

KetanKumar
Shopify Partner
36839 3635 11972

@Beytibyarabesqu 

please check your backend code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Beytibyarabesqu
Explorer
47 0 19

you mean this? @KetanKumar 

Beytibyarabesqu_0-1637167065493.png

 

KetanKumar
Shopify Partner
36839 3635 11972

@Beytibyarabesqu 

yes that current file 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Beytibyarabesqu
Explorer
47 0 19

@KetanKumar 

contact page code pasted below (However for the special order page where can I find the code https://beytibyarabesque.com/pages/special-orders?)

 

 

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

{% if page.content.size > 0 %}
<div class="rte" >
{{ page.content }}
</div>
{% endif %}

<div class="contact-form form-vertical" >
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form: form, form_id: formId %}

<div class="grid grid--half-gutters">
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
<input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
</div>
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
<input
type="email"
id="{{ formId }}-email"
name="contact[email]"
autocorrect="off"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{%- if form.errors contains 'email' -%}
class="input--error"
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
{%- endif -%}
>
{%- if form.errors contains 'email' -%}
<span id="{{ formId}}-email-error" class="input-error-message">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
</span>
{%- endif -%}
</div>
</div>

<label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

<label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>

<input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

{% endform %}
</div>
</div>
</div>
</div>

KetanKumar
Shopify Partner
36839 3635 11972

@Beytibyarabesqu 

yes i can see form 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Beytibyarabesqu
Explorer
47 0 19

@KetanKumar In contact page, I am good with the layout i don't want to change it

but in the special orders https://beytibyarabesque.com/pages/special-orders, i would like to have the form next to the text, is that possible?  I added the form from an third party app

 

KetanKumar
Shopify Partner
36839 3635 11972

@Beytibyarabesqu 

yes sure i will do customization code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
aden_mc
Tourist
3 0 3

Please can you help me with the same issue?

 

KetanKumar
Shopify Partner
36839 3635 11972

@aden_mc 

can you please send store url so i will check and guide you

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
aden_mc
Tourist
3 0 3
KetanKumar
Shopify Partner
36839 3635 11972

@aden_mc 

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 1024px) {
section#shopify-section-template--15663130083485__main {
    float: left;
    width: 40%;
}

section#shopify-section-template--15663130083485__form {
    float: left;
    width: 50%;
}

section#shopify-section-template--15663130083485__main .page-width {
    max-width: 170px;
}

section#shopify-section-template--15663130083485__form .page-width {
    max-width: 650px;
}
}

 

KetanKumar_0-1660205662492.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
aden_mc
Tourist
3 0 3
Thanks Kumar,

I appreciate your help. I will try that later.
KetanKumar
Shopify Partner
36839 3635 11972

@aden_mc 

yes, please try and let me know if any changes

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
November3
New Member
14 0 0

Hi KetanKumar, I facing the same issue on my contact form, it will be wonderful if you could help me 🙂

Can you make my form 50% less width? I want to put an image beside the form.

Screenshot from soreScreenshot from sore

Impulse theme.

Page URL: https://kitojewlery.com/pages/%D7%A7%D7%91%D7%99%D7%A2%D7%AA-%D7%A4%D7%92%D7%99%D7%A9%D7%94