Contact page

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

Accepted Solutions
dmwwebartisan
Shopify Partner
9731 2226 3053

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 →

View solution in original post

dmwwebartisan
Shopify Partner
9731 2226 3053

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

View solution in original post

Replies 11 (11)
dmwwebartisan
Shopify Partner
9731 2226 3053

@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 →
CrazyBobble
Tourist
10 0 1

Hi,

crazy-bobble.myshopify.com

Is this what you need?

 

dmwwebartisan
Shopify Partner
9731 2226 3053

@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 →
CrazyBobble
Tourist
10 0 1

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

Thanks

 

dmwwebartisan
Shopify Partner
9731 2226 3053

@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 →
CrazyBobble
Tourist
10 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
9731 2226 3053

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 →

View solution in original post

dmwwebartisan
Shopify Partner
9731 2226 3053

@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 →
CrazyBobble
Tourist
10 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