Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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!
This is an accepted solution.
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;}
}
Please share store URL.
Thanks!
Hi,
crazy-bobble.myshopify.com
Is this what you need?
Please share store password.
Thanks!
Hi, I've just disabled it temporarily. Are you able to access it now?
Thanks
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!
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
Thanks!
This is an accepted solution.
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!
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
This is an accepted solution.
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;}
}
Nevermind it's cool I've figured it out.
Thanks for your help
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024