In the third section of this web page, where it says “Protocols”, I’m having a problem with the content running off the screen when I switch to the Mobile Portrait or Landscape breakpoints.
Inside that section named section-home-protocols-2col, I have a grid named protocols_grid-wrapper that contains two child divs. I used a grid for this section so that I can stack the content and logos at mobile breakpoints.
Inside this parent grid I have two child divs, protocols_content-wrapper and protocols_logo-wrapper. The latter div was also built as a grid so that I can adjust the number of logos at smaller breakpoints.
The problem is that when I change to either Mobile breakpoints, the divs expand beyond the right side of the screen. I thought that changing the content-wrapper div to a Block layout would fix it but it doesn’t. And even if that worked, I don’t think I could do that to the logo-wrapper div since it needs to be a grid. With the latter div, I could reduce the number of columns (I will need to do that anyway) that doesn’t solve the underlying issue which is that I want that entire grid to be contained and centered within the left and right sides of the display.
How do you fix a problem like this? Thanks!
P.S. Please note that once I can fix this problem, I will convert the “Services” section below it to a similar layout except that the Services content will be displayed below the Protocols logos and the Services images will go below the Protocols content.
Here is my site Read-Only: LINK