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!
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
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!
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;}
}
User | RANK |
---|---|
128 | |
102 | |
74 | |
72 | |
44 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022