Contact page

Solved
CrazyBobble
Tourist
7 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

0 Likes
dmwwebartisan
Shopify Partner
9138 2117 2885

@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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
CrazyBobble
Tourist
7 0 1

Hi,

crazy-bobble.myshopify.com

Is this what you need?

 

0 Likes
dmwwebartisan
Shopify Partner
9138 2117 2885

@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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
CrazyBobble
Tourist
7 0 1

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

Thanks

 

dmwwebartisan
Shopify Partner
9138 2117 2885

@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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
CrazyBobble
Tourist
7 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

0 Likes
dmwwebartisan
Shopify Partner
9138 2117 2885

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 | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
9138 2117 2885

@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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
CrazyBobble
Tourist
7 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

0 Likes