Getting site ready for Server-Side Rendering

Hi,
My Plant Library site (domain www.theplantlibrary.co.za ) looks terrible on small/ mobile screens as the text and image galleries overlap, and it looks as though each gallery is added twice. Perfect on a desktop - although pages load very, very slowly. I’m trying to work out if and where to add the suggested code. If the first part of my page codes look like this:

imp ort {local} from “wix-storage”;
const linkField = “link-Plants-title”;

$w.onReady(function () {
setUrls(’ #grasslandTrees ‘, ‘trees’);
setUrls(’ #grasslandShrubs ‘, ‘shrubs’);
setUrls(’ #grasslandPerennials ‘, ‘perennials’);
setUrls(’ #grasslandSucculents ‘, ‘succulents’);
setUrls(’ #grasslandGroundcovers ‘, ‘groundcovers’);
setUrls(’ #grasslandBulbs ‘, ‘bulbs’);
setUrls(’ #grasslandGrass ', ‘grass’);
});
function setUrls(datasetSelector, galleryCategory) {
$w(datasetSelector).onReady(() => {
const numberOfItems = $w(datasetSelector).getTotalCount();
$w(datasetSelector).getItems(0, numberOfItems)
.then( (result) => {

do I add your code below? If so, where, and what do I replace the #myText with?

import {local} from ‘wix-storage’;

import wixWindow from ‘wix-window’;

$w.onReady( function () {

if (wixWindow.rendering.env === “browser”) {

$w(" #myText ").text = local.getItem(“key”);
}
} );
}