I have this tool in a custom html block in my wordpress site: <!-- Brand Finder Tool Start -->
<style>
    .brand-finder {
        font-family: Arial, sans-serif;
        max-width: 700px;
        margin: 20px auto;
        padding: 20px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .brand-finder h2 {
        text-align: center;
        margin-bottom: 10px;
    }
    .brand-finder p {
        text-align: center;
        margin-bottom: 20px;
        font-size: 16px;
    }
    .filters {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 25px;
    }
    .filter {
        flex: 1 1 200px;
        display: flex;
        flex-direction: column;
    }
    .filter label {
        font-weight: bold;
        margin-bottom: 8px;
        font-size: 14px;
    }
    .filter select {
        padding: 8px;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 14px;
    }
    #brandList {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    #brandList li {
        background-color: #f9f9f9;
        margin-bottom: 12px;
        padding: 15px;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        transition: background-color 0.3s;
    }
    #brandList li:hover {
        background-color: #f1f1f1;
    }
    @media (max-width: 600px) {
        .filters {
            flex-direction: column;
        }
        .filter {
            width: 100%;
        }
    }
</style>

<div class="brand-finder">
    <h2>Affordable Brand Finder Tool</h2>
    <p>Discover affordable Canadian clothing brands that match your preferences. Use the filters below to find your perfect fit!</p>
    <div class="filters">
        <div class="filter">
            <label for="priceRange">Price Range:</label>
            <select id="priceRange">
                <option value="all">All</option>
                <option value="budget">Budget</option>
                <option value="midRange">Mid-Range</option>
                <option value="premium">Premium</option>
            </select>
        </div>
        <div class="filter">
            <label for="style">Style:</label>
            <select id="style">
                <option value="all">All</option>
                <option value="casual">Casual</option>
                <option value="formal">Formal</option>
                <option value="athletic">Athletic</option>
                <option value="plusSize">Plus-Size</option>
                <option value="vintage">Vintage</option>
                <option value="loungewear">Loungewear</option>
            </select>
        </div>
        <div class="filter">
            <label for="sustainability">Sustainability:</label>
            <select id="sustainability">
                <option value="all">All</option>
                <option value="eco-friendly">Eco-Friendly</option>
                <option value="standard">Standard</option>
            </select>
        </div>
    </div>
    <ul id="brandList"></ul>
</div>

<script>
    (function(){
        const brands = [
            // Mainstream & Value-Focused Brands
            { 
                name: "Ardene", 
                priceRange: "budget", 
                style: "casual", 
                sustainability: "standard" 
            },
            { 
                name: "Joe Fresh", 
                priceRange: "budget", 
                style: "casual", 
                sustainability: "standard" 
            },
            { 
                name: "Old Navy", 
                priceRange: "budget", 
                style: "casual", 
                sustainability: "standard" 
            },
            { 
                name: "Simons' OFF!", 
                priceRange: "midRange", 
                style: "formal", 
                sustainability: "standard" 
            },
            { 
                name: "Forever 21", 
                priceRange: "budget", 
                style: "casual", 
                sustainability: "eco-friendly" 
            },
            { 
                name: "Reitmans", 
                priceRange: "midRange", 
                style: "plusSize", 
                sustainability: "standard" 
            },
            { 
                name: "Penningtons", 
                priceRange: "budget", 
                style: "plusSize", 
                sustainability: "standard" 
            },
            { 
                name: "Addition Elle", 
                priceRange: "budget", 
                style: "plusSize", 
                sustainability: "standard" 
            },
            { 
                name: "Dynamite", 
                priceRange: "budget", 
                style: "casual", 
                sustainability: "standard" 
            },
            
            // Online & Fast Fashion Brands
            { 
                name: "H&M", 
                priceRange: "budget", 
                style: "casual", 
                sustainability: "eco-friendly" 
            },
            { 
                name: "Lululemon", 
                priceRange: "premium", 
                style: "athletic", 
                sustainability: "eco-friendly" 
            },
            
            // Vintage & Second-Hand
            { 
                name: "Poshmark", 
                priceRange: "budget", 
                style: "vintage", 
                sustainability: "eco-friendly" 
            },
            
            // Local & Independent Brands
            { 
                name: "Tentree", 
                priceRange: "midRange", 
                style: "casual", 
                sustainability: "eco-friendly" 
            },
            { 
                name: "Frank and Oak", 
                priceRange: "midRange", 
                style: "formal", 
                sustainability: "eco-friendly" 
            },
            { 
                name: "Knix", 
                priceRange: "midRange", 
                style: "loungewear", 
                sustainability: "eco-friendly" 
            },
            
            // Clothing Rental Services
            { 
                name: "Fresh Fashion Library", 
                priceRange: "budget", 
                style: "casual", 
                sustainability: "eco-friendly" 
            },
            { 
                name: "The FitzRoy", 
                priceRange: "premium", 
                style: "formal", 
                sustainability: "eco-friendly" 
            },
        ];

        function filterBrands() {
            const priceRange = document.getElementById("priceRange").value;
            const style = document.getElementById("style").value;
            const sustainability = document.getElementById("sustainability").value;

            const filteredBrands = brands.filter(brand => 
                (priceRange === "all" || brand.priceRange === priceRange) &&
                (style === "all" || brand.style === style) &&
                (sustainability === "all" || brand.sustainability === sustainability)
            );

            displayBrands(filteredBrands);
        }

        function displayBrands(brandsToDisplay) {
            const brandList = document.getElementById("brandList");
            brandList.innerHTML = "";

            if (brandsToDisplay.length === 0) {
                const li = document.createElement("li");
                li.textContent = "No brands match your criteria.";
                brandList.appendChild(li);
                return;
            }

            brandsToDisplay.forEach(brand => {
                const li = document.createElement("li");
                li.innerHTML = `<strong>${brand.name}</strong><br>
                                Price Range: ${capitalize(brand.priceRange)}<br>
                                Style: ${formatStyle(brand.style)}<br>
                                Sustainability: ${formatSustainability(brand.sustainability)}`;
                brandList.appendChild(li);
            });
        }

        function capitalize(word) {
            if (!word) return "";
            // Handle camelCase like 'midRange' to 'Mid-Range'
            const formatted = word.replace(/([A-Z])/g, ' $1');
            return formatted.charAt(0).toUpperCase() + formatted.slice(1);
        }

        function formatStyle(style) {
            switch(style) {
                case "plusSize":
                    return "Plus-Size";
                case "loungewear":
                    return "Loungewear";
                case "vintage":
                    return "Vintage";
                default:
                    return capitalize(style);
            }
        }

        function formatSustainability(sustainability) {
            return sustainability === "eco-friendly" ? "Eco-Friendly" : "Standard";
        }

        // Attach event listeners after the DOM is fully loaded
        document.addEventListener("DOMContentLoaded", function(){
            document.getElementById("priceRange").addEventListener("change", filterBrands);
            document.getElementById("style").addEventListener("change", filterBrands);
            document.getElementById("sustainability").addEventListener("change", filterBrands);

            // Initial display
            filterBrands();
        });
    })();
</script>
<!-- Brand Finder Tool End -->
but it takes up the whole page so the rest of the content below cannot be seen . how can you do it so that itll reduce while still being easy for users to make use of and the rest of the content below will be easy to see