2 Column vertical separator desktop, crushes to horizontal line separator mobile.

[BWinter1]

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 Preview

What I'd like.  

Current layout.

Backend Layout

[BWinter1 · Accepted solution]

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

[BWinter1]

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]

Hi @BWinter1, 

there are many different ways how to get your desired result. One would be to

1. drop this part into your css file

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

2. Give your Columns(at least the left one) a class like this 
   

best, 

Anton

[BWinter1]

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

[Anton]

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

[kvlschaefer]

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

[BWinter1]

Thank you Kristen