/* Mobile First Approach */@media only screen and (max-width: 600px) { /* Adjustments for smaller screens */ .container { flex-direction: column; /* Stack columns vertically */ align-items: center; /* Center align columns */ } .left-column, .right-column { width: 100%; /* Full width for columns */ margin: 0; /* Remove margins */ } #siteimage { width: 100%; /* Make the background image responsive */ } .floatleft, .floatright { width: 100%; /* Make floated elements full width */ margin: 0; /* Remove margins */ }}/* Larger screens */@media only screen and (min-width: 601px) { /* Your existing styles for larger screens */}So I am sharing the essential parts of my CSS, leaving out some styling elements that don't affect the layout. As of now it works perfectly on a computer, but it does not work for mobile. The left column is displaying fine, the right column is too wide, the box itself is cut off from the mobile screen, and the content inside it (which is in a div class inside the right column itself) is automatically scrolling so the user can see it, but as you can imagine it's now hard to view in 10% of the right column box.
Before any comments about how redundant the code is, this was the only way for it to work as I wanted, so I am afraid to change anything.
.container { display: inline-flex; flex-direction: row; justify-content: space-between; align-items: flex-start; box-sizing: border-box; width: 100%; } .left-column { flex: 1 1 auto; box-sizing: border-box; border: 2px solid #FDF9F8; background-color: #9AABC1; margin-bottom: 8px; margin-top: 10px; margin-right: 4px; margin-left: 8px; width: 254px; height: 550px; }.right-column { flex: 0 1 auto; box-sizing: border-box; padding: 12px; background-color: #9AABC1; color: #FDF9F8; border: 2px solid #FDF9F8; margin-bottom: 8px; margin-top: 10px; margin-right: 8px; margin-left: 4px; width: 90%; height: 550px; } .scrolling-box { overflow-y: auto; overflow-x: auto; height: 470px; padding: 10px; box-sizing: border-box; }I tried changing widths to percentages, and I also tried adding @mobile code like so, but it has had no effect. Changing much in the original code screws up the layout on desktop, adding mobile code is not changing anything. I tried these separately and together. I also tried to make a separate mobile version of the site with more simple code but alas I run into the same issues, so rather I would like it to adjust for screens than to redirect to a whole new layout format.