Need Help Hiding Vertical Elements in Mobile

Site URL: https://www.binkrabbitgoods.com/

Hi! Can someone please help me hide vertical dividers when in mobile view?

I have VERY limited CSS knowledge... Can you help me understand if order matters when copy & pasting code?

Code block:

<div class="vertical">
  
</div>

Thank you in advance!

Hey @binkrabbitgoods try to add this in Custom CSS:

@media screen and (max-width: 767px) {
  .vertical {
    border-bottom: 1px solid #ff6d56;
    border-left: none;
    height: 1px;
    transform: translateX(-50%);
    width: 200px;
  }
}

@SquareRefresh Thanks for your help! But it didn't work... 😕

Looks like it pushed the line to the left and added a horizontal line. 

Any other suggestions?

2 hours ago, binkrabbitgoods said:

Thanks for your help! But it didn't work... 😕

Looks like it pushed the line to the left and added a horizontal line. 

Any other suggestions?

Here is my result with previous code:

@SquareRefresh 

I wonder why they would be different. Does order matter in CSS?

In any case, is there a way to hide just the vertical lines without adding horizontal ones when in mobile? 

On 11/14/2021 at 11:12 AM, binkrabbitgoods said:

Site URL: https://www.binkrabbitgoods.com/

Hi! Can someone please help me hide vertical dividers when in mobile view?

I have VERY limited CSS knowledge... Can you help me understand if order matters when copy & pasting code?

 

Code block:

<div class="vertical">
  
</div>

 

Thank you in advance!

 

 

@tuanphan Any chance you can help with this too?

On 11/18/2021 at 7:03 AM, binkrabbitgoods said:

@tuanphan Any chance you can help with this too?

Add to Design > Custom CSS

/* Hide vertical line on mobile */
@media screen and (max-width:767px) {
.vertical {
    display: none;
}
}

22 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Hide vertical line on mobile */
@media screen and (max-width:767px) {
.vertical {
    display: none;
}
}

 

Thank you! It worked!