Hide column borders on mobile

[jarmandary]

Hi,

I’ve added a border to some columns using the following CSS:

.column-with-border:after{
content: “”;
background-color: #D3D3D3;
position: absolute;
top: 0;
right: -6.8%;
width: 1px;
height: 100%;
}

.column-with-border:last-child:after{
display: none;
}

I’m happy with how it looks on desktop, but on mobile it means the borders show up on the right of the screen, looking a bit weird.

Please could you tell me how I can hide those borders on mobile only? Or when the site gets below a certain width?

For reference, the site is : https://soundtrack.academy/

Thank you

[jarmandary]

FYI: as a workaround I duplicated the section and removed the borders on the duplicated version, and set it to only appear on the smaller breakpoints. Then I hid the version with borders in the same breakpoints.

…not sure if that’s the best way to do it though? Seems…bloated…

[ruenel]

Hello Jonathan,

Thank your for the very detailed post information.

You do not have to duplicate the columns. All you have to do is to update the custom css and use this instead:

@media(min-width: 768px){
  .column-with-border:after{
    content: "";
    background-color: #D3D3D3;
    position: absolute;
    top: 0;
    right: -6.8%;
    width: 1px;
    height: 100%;
  }

  .column-with-border:last-child:after{
    display: none;
  }
}

This custom css will only take effect adding a border to the columns when the screen size is greater than or equal to 768 pixels.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

We would love to know if this has worked for you. Thank you.