How do I stop content overlap with Display Suite on mobile/narrow screens?

Question

Building a site where sugar glider breeders and vendors can list their businesses and wares and find informational articles, links to exotic vets, and more.

The site is built on Drupal Core 8.2.7 with Adaptivetheme 8.x-2.0 and uses Display Suite 8.x-2.6 with the Fluid two column stacked layout applied to the Full Content view to display business information in a columnar format with contact info and links on the left and tags from several Taxonomies on the right. Field Group 8.x-1.0-rc6 was used to construct several Fieldset groups, and custom CSS was applied to those fieldsets to give them a unique look and border.

This works pretty well on desktop displays, tablets, and some landscape smartphones:

But looks awful if you narrow down a desktop browser or view the site on a portrait smartphone. The boxes adjust well down to a certain size, then "responsive" goes out the window and they start overlapping. The About Us section is in the Footer of the Display Suite layout, so it is unaffected.

The site exhibits the same behavior, where the Right and Left Display Suite regions overlap on small displays instead of stacking (as would seem logical), regardless of whether the fields are in a Field Group or whether any custom CSS has been applied. This leads me to believe it is something to do with Display Suite, but I have not been able to find any way to control how its regions are rendered. I can control the flow of regions for the theme (e.g. Sidebar 1, Main Content, Sidebar 2) from the theme's Layout settings, but I cannot find any similar functionality for Display Suite regions.

I assume this is possible because my other site (built on the same Drupal Core, Adaptivetheme, Display Suite, and most of the same modules) stacks its content vertically when the screen gets too small. The only significant differences I can think of are that the other site is mostly text next to images or videos rather than text next to text like this one, and the other site's Display Suite layouts are applied to Paragraphs instead of being applied to the Content type directly.

Any thoughts for what may be causing this and how to resolve or work around it are welcome.

Answer 1

Found the solution when I discovered a difference between this site and the other that did not register fully when I posted the question.

The Content Types on this site and the Paragraphs on the other both use Display Suite, but this site was using one of the default Display Suite layouts. I built the other one later and used the more flexible Adaptivetheme bootstrap-style layouts.

Turns out the layout is the reason that items were stacking vertically on one site and stubbornly staying side-by-side on the other. When I switched this site to an Adaptivetheme layout like the other, things were much improved:

In case anyone else has a similar issue and is stuck with a default Display Suite layout, I also found that the email field was the only field causing problems. You apparently cannot truncate an Email field, but I found that switching the content regions so the taxonomy tags were on the left and the location, contact, and links were on the right was better than the original layout because the email address could stretch its box without running into the box on the other side.