Create Swipeable Rich Text

[cloud2]

How do I make this mobile swipe instead of default stacked? Custom code for this Section is long so must be able to fit into limited characters or go into Edit Code for longer code if needed. Dont want to affect Rich Text in all pages of the website just this one. Current custom code for this page is:

.rich-text a {
display: inline-block;
padding: 8px 18px;
margin: 0.25em 0.25em 0.25em 0.25em;
background-color: #ffffff;
border: 0.1em solid #6c4c32;
color: #6c4c32;
text-align: center;
border-radius: 30px;
text-decoration: none;
transition: background-color 0.5s ease, color 0.5s ease;
}
.rich-text a:hover {
background-color: #6c4c32;
color: #ffffff;
}
.rich-text a.all-locations {
background-color: #6c4c32;
color: #ffffff;
}

[Geist]

The most straight forward way to do this is to use css scroll snap. You can read about it on mdn. You could import a large library called swiperjs if you wanted but I think that is overkill for this. If you want indicator dots to show what slide you are on you need to use the javascript intersection observer api.

[cloud2]

would i be able to achieve this by using the multicolumn section with extra code to make the boxes smaller? could you provide any steps on how to do a basic scroll with the dawn theme?

[Geist]

You said you want mobile swipe, and css has a built in scroll snap property you can read about on mdn. If you want to have a horizontal scroll then you don‘t need to worry about scroll snap. You can use overflow-y: auto but you need to look at where you add it. Look at your site‘s DOM in devtools there you can add a css property and see it in real time.