FROM CACHE - en_header

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 40 (40)
JHKCreate
Shopify Partner
3467 624 879

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
33514 3358 11074

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
33514 3358 11074

@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
33514 3358 11074

@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
33514 3358 11074

@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
33514 3358 11074

@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
33514 3358 11074

@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
33514 3358 11074

@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
33514 3358 11074

@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