Hello,
I have a custom split content block, to be used as a header with a search on one half, and a button on the other. I’d like to add a separator between the two, vertically on desktop, and switch to horizontal on mobile. How would you resolve this challenge?
Current Desktop.
Desktop Preview
What I’d like.
Current Mobile
Mobile PreviewWhat I’d like.
Current layout.
Backend LayoutHi @BWinter1,
Thanks for reaching out!
I would like to invite some experts to our conversation.
Hi @Teun, @alyssamwilie, @Anton, @Jake_Lett, @LMeert - Do you have any advice for @BWinter1’s challenge?
Thanks!
Best,
Kristen
Thank you Kristen
Hi @BWinter1,
there are many different ways how to get your desired result. One would be to
@media screen and (max-width:480px){
.wrapper.equal-height-container .left-column{
border-bottom:2px solid #00f;
padding:2rem 0;
}
}
@media screen and (min-width:481px){
.wrapper.equal-height-container .left-column{
border-right: 2px solid #00f;
padding:0 2rem;
}
}
best,
Anton
Thank you very much @Anton,
It wasn’t working at first, I added important tags, and a blue line on the right side shows up in both viewports. I see you’ve written border-bottom for under 480px, however the above 481px is the only one working here. Any ideas?
}
@media screen and (max-width:480px){
.wrapper.equal-height-container .left-column{
border-bottom:2px solid #00f !important;
padding: 0 2rem !important;
}
}
@media screen and (min-width:481px){
.wrapper.equal-height-container .left-column{
border-right: 2px solid #00f !important;
padding:0 2rem !important;
}
}
Hi @BWinter1,
I don’t recommend to use “!important” on everything - because it will cause this exact behavior.
Can you provide a preview link for users outside of your hub(no preview link from the design manager). Maybe this requires specific CSS bits and pieces.
best,
Anton
Thanks again @Anton really appreciate your help:
I removed important tags in the css.
Here’s a public URL
https://www.amerifirst.com/_bw_test
Bryan
@Anton, thank you for your help on this. I wanted to share the successful code, adjusting break points, and a few other things, just trial and error until it worked. Wouldn’t have gotten here without your help.
https://www.amerifirst.com/_bw_test
Cheers!
}
@media (max-width: 767px)
{
.wrapper.equal-height-container .left-column-split-header{
border-bottom:6px solid #f16356;
padding: 0 2rem;
}}
@media (min-width: 768px)
{
.wrapper.equal-height-container .left-column-split-header{
border-right: 6px solid #f16356;
padding: 0 2rem;
}}