skanda-vasishta
commented
3 months ago This should be fixed?
Here are some images:
In terms of the code, here are some key things I changed: 1) Row structure: Changed the class from just a row to a row-align-items-start to fix alignment issues; then, changed each column from col-md-9/col-md-3 to col types supported by extra small and large screens (same sized image and TOC for extra small, 8:4 for large screens); From this line to line 79. https://github.com/ioos/sanctuarywatch/blob/97a0df9895c2c36fbaf3fdc2d2ea63ce36f55c4d/themes/Sanctuary_Watch/single-scene.php#L69
2) CSS modifications: added flex and flex-start attributes to display and align-items, respectively, for container; reassigned max-width attributes; set up media queries based on screen width to resize the content. Starting at this line and below: https://github.com/ioos/sanctuarywatch/blob/97a0df9895c2c36fbaf3fdc2d2ea63ce36f55c4d/themes/Sanctuary_Watch/style.css#L117
not ideal "shrinking" behavior by SVG and TOC; rather, when page width is reduced, the image shrinks as needed, but would be better if it was higher on the page; CSS styling/formatting thing to come back to.
Some pertinent code to look at from single-scene.php, lines 45-56 : https://github.com/ioos/sanctuarywatch/blob/2bc045dfb542fa6aa76d2d202e41560eaf037c3a/themes/Sanctuary_Watch/single-scene.php#L45
https://github.com/ioos/sanctuarywatch/blob/2bc045dfb542fa6aa76d2d202e41560eaf037c3a/themes/Sanctuary_Watch/single-scene.php#L48
https://github.com/ioos/sanctuarywatch/blob/2bc045dfb542fa6aa76d2d202e41560eaf037c3a/themes/Sanctuary_Watch/single-scene.php#L56