Vertical dividers between between rich text modules on landing page
SOLVEHello,
Does anyone know how to add vertical divider lines between rich text modules on a landing page? I'm only seeing an option for horizontal dividers in the Design Manager.
What I'm trying to replicate:
How the modules are currently set up in the Design Manager:
Thanks in advance!
2 Accepted solutions
Vertical dividers between between rich text modules on landing page
SOLVEHi @J-Masterson
You need to go to the Design Manager and, in the "CSS Class" blank field on the right side of the Flexible Column, assign a unique name. After assigning "CSS Class" names to the 3 Flexible Columns, you will need to write the border-right CSS property for those classes. For single-column displays, use a media query to set the border to none.
I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!
Vertical dividers between between rich text modules on landing page
SOLVEHi @J-Masterson no problem, sorry for the delay!
As @GRajput explained, you'll need to add the class to column first - then you'll define the CSS for that class with code like this:
.your-class-name {
border-right: 5px solid red;
}
Simply change 5px to your preferred thickness and the color "red" to any hex code (e.g. #3D3D3D for a gray).
You can also define border-left if needed, depending on which column(s) you add the class to.
If my reply answered your question please mark it as a solution to make it easier for others to find.
Vertical dividers between between rich text modules on landing page
SOLVEHi @J-Masterson
You need to go to the Design Manager and, in the "CSS Class" blank field on the right side of the Flexible Column, assign a unique name. After assigning "CSS Class" names to the 3 Flexible Columns, you will need to write the border-right CSS property for those classes. For single-column displays, use a media query to set the border to none.
I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!
Vertical dividers between between rich text modules on landing page
SOLVEVertical dividers between between rich text modules on landing page
SOLVEHi @J-Masterson I would use CSS to add a border-left and border-right to the center module - that would add the divider on each side.
If my reply answered your question please mark it as a solution to make it easier for others to find.
Vertical dividers between between rich text modules on landing page
SOLVEVertical dividers between between rich text modules on landing page
SOLVEHi @J-Masterson no problem, sorry for the delay!
As @GRajput explained, you'll need to add the class to column first - then you'll define the CSS for that class with code like this:
.your-class-name {
border-right: 5px solid red;
}
Simply change 5px to your preferred thickness and the color "red" to any hex code (e.g. #3D3D3D for a gray).
You can also define border-left if needed, depending on which column(s) you add the class to.
If my reply answered your question please mark it as a solution to make it easier for others to find.
