How can I split my contact page content 50/50 without coding?

[CrazyBobble]

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...

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

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

[dmwwebartisan · 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!

[dmwwebartisan]

@CrazyBobble 

Please share store URL.

Thanks!

[CrazyBobble]

Hi,

crazy-bobble.myshopify.com

Is this what you need?

[dmwwebartisan]

@CrazyBobble 

Please share store password.

Thanks!

[CrazyBobble]

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

Thanks

[dmwwebartisan]

@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!

[CrazyBobble]

Hi,

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

 

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

Thanks

[dmwwebartisan]

@CrazyBobble 

Thanks!

[dmwwebartisan · 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!

[CrazyBobble]

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 · 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;}
}

[CrazyBobble]

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

Thanks for your help