Solved

Can I split my Shopify contact page content evenly without coding?

CrazyBobble
Tourist
12 0 1

Hi everyone, so I'm new to shopify and don't have much experience. I've created a contact page and I've managed to get it so that the contact form is on the right hand side and there's some text on the left hand side...

CrazyBobble_0-1631792570001.png

However, I want this to be split 50/50 like this...

CrazyBobble_1-1631792684534.png

 

Does anyone know how to do this or if there is a way without editing any code because I'm not very experienced? I've added the text to the left hand side by putting it in content on the contact page.

Thanks

Accepted Solutions (2)
dmwwebartisan
Shopify Partner
12279 2546 3693

This is an accepted solution.

@CrazyBobble 

Please try this css and remove previous css class

@media (min-width: 768px) {
.template-suffix-contact .slim-column-left-layout>.column:first-child {width: 750px;margin-right: 40px;}
.template-suffix-contact .slim-column-left-layout>.column:last-child { flex: 0 1 750px;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12279 2546 3693

This is an accepted solution.

@CrazyBobble 

Please change width like this 

@media (min-width: 768px) {
.template-suffix-contact .slim-column-left-layout>.column:first-child {width:450px;margin-right: 40px;}
.template-suffix-contact .slim-column-left-layout>.column:last-child { flex: 0 1 1050px;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 11 (11)

dmwwebartisan
Shopify Partner
12279 2546 3693

@CrazyBobble 

Please share store URL.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
CrazyBobble
Tourist
12 0 1

Hi,

crazy-bobble.myshopify.com

Is this what you need?

 

dmwwebartisan
Shopify Partner
12279 2546 3693

@CrazyBobble 

Please share store password.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
CrazyBobble
Tourist
12 0 1

Hi, I've just disabled it temporarily. Are you able to access it now?

Thanks

 

dmwwebartisan
Shopify Partner
12279 2546 3693

@CrazyBobble 

Please add the following code at the bottom of your assets/styles.css file. 

@media (min-width: 768px) {
.template-suffix-contact .slim-column-left-layout>.column:first-child {width: 600px;margin-right: 40px;}
.template-suffix-contact .slim-column-left-layout>.column:last-child { flex: 0 1 400px;}
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
CrazyBobble
Tourist
12 0 1

Hi,

Thank you this has worked but can I make it wider like this one...

Screen Shot 2021-09-16 at 12.43.58.png

Mine is more in the centre and this is a little wider with more space in between.

Thanks

dmwwebartisan
Shopify Partner
12279 2546 3693

@CrazyBobble 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12279 2546 3693

This is an accepted solution.

@CrazyBobble 

Please try this css and remove previous css class

@media (min-width: 768px) {
.template-suffix-contact .slim-column-left-layout>.column:first-child {width: 750px;margin-right: 40px;}
.template-suffix-contact .slim-column-left-layout>.column:last-child { flex: 0 1 750px;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
CrazyBobble
Tourist
12 0 1

Hi, 

That's great thank you.

For future, which part of the code would I need to change if I want to make the gap between the 2 columns slightly larger? I might decide to do that later on so it would be good to know. I want to make both sides slightly less wide and have a larger blank space in between them so the text on the left hand side is wrapped a bit more if that makes sense?

Thanks

dmwwebartisan
Shopify Partner
12279 2546 3693

This is an accepted solution.

@CrazyBobble 

Please change width like this 

@media (min-width: 768px) {
.template-suffix-contact .slim-column-left-layout>.column:first-child {width:450px;margin-right: 40px;}
.template-suffix-contact .slim-column-left-layout>.column:last-child { flex: 0 1 1050px;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
CrazyBobble
Tourist
12 0 1

Nevermind it's cool I've figured it out.

Thanks for your help