Modify this code to be as follows. First, make the appearance of the results field compatible with all screens, and their appearance is not intertwined with each other in #answer1
for example 
desktop 1280 W 648 H px
tablet 768 W 648 H px
phone 390 W 648 H px 
Make it interactive with all types and measurements of screens and make sure that it does not overlap and block the result

make each season has its own emoji

the text box #answer1 is in #section7 so when i click the button #calcnow make #section7 and #answer1 appears in the same time 

make sure everythings appears corectly with out any errors , consider every situation remember do not make any mistakes , and put in your mind its wix velo to make sure it is fully compatible , give me the fully modified code 

the code :
// Import necessary Wix modules
import wixData from 'wix-data';

// When the page is ready
$w.onReady(function () {
    // Populate Year Dropdown
    populateYearDropdown();

    // Populate Month Dropdown
    populateMonthDropdown();

    // Set up event listeners for the dropdowns
    $w("#dropdown1year, #dropdown2mounth").onChange(updateDays);

    // Handle the "Calculate" button click
    $w("#calcnow").onClick(handleCalculate);

    // Initial update of days dropdown
    updateDays();
});

/**
 * Populates the Year Dropdown with options from current year down to 1900.
 */
function populateYearDropdown() {
    const currentYear = new Date().getFullYear();
    const yearOptions = [];

    for (let year = currentYear; year >= 1900; year--) {
        yearOptions.push({ label: year.toString(), value: year.toString() });
    }

    $w("#dropdown1year").options = yearOptions;
}

/**
 * Populates the Month Dropdown with month names and corresponding values.
 */
function populateMonthDropdown() {
    const monthOptions = [
        { label: "January - 1", value: "1" },
        { label: "February - 2", value: "2" },
        { label: "March - 3", value: "3" },
        { label: "April - 4", value: "4" },
        { label: "May - 5", value: "5" },
        { label: "June - 6", value: "6" },
        { label: "July - 7", value: "7" },
        { label: "August - 8", value: "8" },
        { label: "September - 9", value: "9" },
        { label: "October - 10", value: "10" },
        { label: "November - 11", value: "11" },
        { label: "December - 12", value: "12" }
    ];

    $w("#dropdown2mounth").options = monthOptions;
}

/**
 * Updates the Days Dropdown based on selected Year and Month.
 */
function updateDays() {
    const birthYear = parseInt($w("#dropdown1year").value);
    const birthMonth = parseInt($w("#dropdown2mounth").value);

    if (!birthYear || !birthMonth) return;

    const lastDay = new Date(birthYear, birthMonth, 0).getDate();
    const daysOptions = [];

    for (let day = 1; day <= lastDay; day++) {
        daysOptions.push({ label: day.toString(), value: day.toString() });
    }

    $w("#dropdown3day").options = daysOptions;
}

/**
 * Handles the Calculate button click event.
 */
function handleCalculate() {
    // Get selected values
    const birthYear = parseInt($w("#dropdown1year").value);
    const birthMonth = parseInt($w("#dropdown2mounth").value) - 1; // JavaScript months are 0-based
    const birthDay = parseInt($w("#dropdown3day").value);

    // Validate inputs
    if (!birthYear || isNaN(birthMonth) || !birthDay) {
        console.error("Please select all date fields");
        return;
    }

    // Calculate age
    const today = new Date();
    const birthDate = new Date(birthYear, birthMonth, birthDay);
    let years = today.getFullYear() - birthDate.getFullYear();
    let months = today.getMonth() - birthDate.getMonth();
    let days = today.getDate() - birthDate.getDate();

    if (days < 0) {
        const lastMonthDate = new Date(today.getFullYear(), today.getMonth(), 0);
        days = lastMonthDate.getDate() + days;
        months--;
    }

    if (months < 0) {
        months += 12;
        years--;
    }

    // Additional calculations
    const totalMonths = years * 12 + months;
    const totalDays = Math.floor((today - birthDate) / (1000 * 60 * 60 * 24));
    const totalWeeks = Math.floor(totalDays / 7);
    const daysToNextBirthday = calculateDaysToNextBirthday(birthDate, today);
    const nextBirthdayDate = new Date(today.getFullYear(), birthMonth, birthDay);
    const nextBirthdayDay = nextBirthdayDate.toLocaleDateString('en-US', { weekday: 'long' });

    // Zodiac, Day of the week, and Season
    const zodiacSign = getZodiacSign(birthDay, birthMonth + 1);
    const birthDayOfWeek = birthDate.toLocaleDateString('en-US', { weekday: 'long' });
    const birthSeason = getSeason(birthMonth + 1);

    // Update the answer box content with modified HTML
    $w("#answer1").html = generateHTMLContent({
        years,
        months,
        days,
        totalMonths,
        totalWeeks,
        totalDays,
        hours: Math.floor(totalDays * 24),
        daysToNextBirthday,
        nextBirthdayDay,
        zodiacSign,
        birthDayOfWeek,
        birthSeason
    });

    // Show the answer box
    $w("#answer1").expand();
}

/**
 * Generates the HTML content with the provided data.
 * @param {Object} data - The data to display.
 * @returns {string} - The HTML string.
 */
function generateHTMLContent(data) {
    return `
    <div style="
        font-family: Bitter, serif; 
        color: #262627; 
        background-color: #F5F5F5; 
        padding: 20px; 
        min-height: 100vh; 
        box-sizing: border-box; 
        display: flex; 
        justify-content: center; 
        align-items: center;
    ">
        <div style="
            display: grid; 
            grid-template-columns: 1fr; 
            gap: 30px; 
            width: 100%; 
            max-width: 900px;
        ">
        
            <!-- Main Age Display -->
            <div style="
                text-align: center; 
                background: rgba(38, 38, 39, 0.03); 
                border-radius: 15px; 
                padding: 20px;
            ">
                <h1 style="font-size: 36px; margin-bottom: 10px;">Your Life Journey</h1>
                <div style="font-size: 48px; font-weight: bold; margin: 0;">
                    ${data.years}<span style="font-size: 24px; font-weight: normal;"> years </span> 
                    ${data.months}<span style="font-size: 24px; font-weight: normal;"> months </span> 
                    ${data.days}<span style="font-size: 24px; font-weight: normal;"> days </span>
                </div>
            </div>
    
            <!-- Timeline Stats -->
            <div style="
                background: rgba(38, 38, 39, 0.03); 
                border-radius: 15px; 
                padding: 20px; 
                text-align: center;
            ">
                <h2 style="font-size: 24px; margin-bottom: 25px;">Your Timeline</h2>
                <div style="
                    display: flex; 
                    justify-content: space-around; 
                    align-items: center; 
                    flex-wrap: wrap;
                    gap: 20px;
                ">
                    <div style="
                        display: flex; 
                        flex-direction: column; 
                        align-items: center;
                    ">
                        <div style="font-size: 32px; font-weight: bold;">${data.totalMonths}</div>
                        <div style="font-size: 16px;">Months</div>
                    </div>
                    <div style="
                        display: flex; 
                        flex-direction: column; 
                        align-items: center;
                    ">
                        <div style="font-size: 32px; font-weight: bold;">${data.totalWeeks}</div>
                        <div style="font-size: 16px;">Weeks</div>
                    </div>
                    <div style="
                        display: flex; 
                        flex-direction: column; 
                        align-items: center;
                    ">
                        <div style="font-size: 32px; font-weight: bold;">${data.totalDays}</div>
                        <div style="font-size: 16px;">Days</div>
                    </div>
                    <div style="
                        display: flex; 
                        flex-direction: column; 
                        align-items: center;
                    ">
                        <div style="font-size: 32px; font-weight: bold;">${data.hours}</div>
                        <div style="font-size: 16px;">Hours</div>
                    </div>
                </div>
            </div>
    
            <!-- Birthday Countdown -->
            <div style="
                background: rgba(38, 38, 39, 0.03); 
                border-radius: 15px; 
                padding: 20px; 
                text-align: center;
            ">
                <h2 style="font-size: 24px; margin-bottom: 15px;">Next Birthday</h2>
                <div>
                    <div style="font-size: 48px; font-weight: bold;">${data.daysToNextBirthday}</div>
                    <div style="font-size: 20px;">Days until your birthday</div>
                    <div style="font-size: 18px; margin-top: 10px;">
                        It will be on a <span style="font-weight: bold;">${data.nextBirthdayDay}</span>
                    </div>
                </div>
            </div>
    
            <!-- Birth Story -->
            <div style="
                background: rgba(38, 38, 39, 0.03); 
                border-radius: 15px; 
                padding: 20px; 
                text-align: center;
            ">
                <h2 style="font-size: 24px; margin-bottom: 25px;">Your Birth Story</h2>
                <div style="
                    display: flex; 
                    justify-content: space-around; 
                    align-items: center; 
                    flex-wrap: wrap;
                    gap: 20px;
                ">
                    <!-- Zodiac Sign -->
                    <div style="
                        display: flex; 
                        flex-direction: column; 
                        align-items: center;
                    ">
                        <div style="font-size: 36px;">${data.zodiacSign.split(' ')[1]}</div>
                        <div style="font-weight: bold; font-size: 20px; margin-top: 5px;">Zodiac Sign</div>
                        <div style="font-size: 20px;">${data.zodiacSign.split(' ')[0]}</div>
                    </div>
                    <!-- Born On -->
                    <div style="
                        display: flex; 
                        flex-direction: column; 
                        align-items: center;
                    ">
                        <div style="font-size: 36px;">📅</div>
                        <div style="font-weight: bold; font-size: 20px; margin-top: 5px;">Born On</div>
                        <div style="font-size: 20px;">${data.birthDayOfWeek}</div>
                    </div>
                    <!-- Season -->
                    <div style="
                        display: flex; 
                        flex-direction: column; 
                        align-items: center;
                    ">
                        <div style="font-size: 36px;">🍁</div>
                        <div style="font-weight: bold; font-size: 20px; margin-top: 5px;">Season</div>
                        <div style="font-size: 20px;">${data.birthSeason}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `;
}

/**
 * Calculates the number of days until the next birthday.
 * @param {Date} birthDate - The user's birth date.
 * @param {Date} today - Today's date.
 * @returns {number} - Days until next birthday.
 */
function calculateDaysToNextBirthday(birthDate, today) {
    let nextBirthday = new Date(today.getFullYear(), birthDate.getMonth(), birthDate.getDate());
    if (nextBirthday < today) {
        nextBirthday.setFullYear(today.getFullYear() + 1);
    }
    const diffTime = nextBirthday - today;
    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
}

/**
 * Determines the Zodiac Sign based on day and month.
 * @param {number} day - Birth day.
 * @param {number} month - Birth month (1-12).
 * @returns {string} - Zodiac sign with its symbol.
 */
function getZodiacSign(day, month) {
    const zodiacSigns = [
        { name: "Capricorn", symbol: "♑️" },
        { name: "Aquarius", symbol: "♒️" },
        { name: "Pisces", symbol: "♓️" },
        { name: "Aries", symbol: "♈️" },
        { name: "Taurus", symbol: "♉️" },
        { name: "Gemini", symbol: "♊️" },
        { name: "Cancer", symbol: "♋️" },
        { name: "Leo", symbol: "♌️" },
        { name: "Virgo", symbol: "♍️" },
        { name: "Libra", symbol: "♎️" },
        { name: "Scorpio", symbol: "♏️" },
        { name: "Sagittarius", symbol: "♐️" }
    ];

    if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) return zodiacSigns[1].name + " " + zodiacSigns[1].symbol;
    if ((month === 2 && day >= 19) || (month === 3 && day <= 20)) return zodiacSigns[2].name + " " + zodiacSigns[2].symbol;
    if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) return zodiacSigns[3].name + " " + zodiacSigns[3].symbol;
    if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) return zodiacSigns[4].name + " " + zodiacSigns[4].symbol;
    if ((month === 5 && day >= 21) || (month === 6 && day <= 20)) return zodiacSigns[5].name + " " + zodiacSigns[5].symbol;
    if ((month === 6 && day >= 21) || (month === 7 && day <= 22)) return zodiacSigns[6].name + " " + zodiacSigns[6].symbol;
    if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) return zodiacSigns[7].name + " " + zodiacSigns[7].symbol;
    if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) return zodiacSigns[8].name + " " + zodiacSigns[8].symbol;
    if ((month === 9 && day >= 23) || (month === 10 && day <= 22)) return zodiacSigns[9].name + " " + zodiacSigns[9].symbol;
    if ((month === 10 && day >= 23) || (month === 11 && day <= 21)) return zodiacSigns[10].name + " " + zodiacSigns[10].symbol;
    if ((month === 11 && day >= 22) || (month === 12 && day <= 21)) return zodiacSigns[11].name + " " + zodiacSigns[11].symbol;
    return zodiacSigns[0].name + " " + zodiacSigns[0].symbol;
}

/**
 * Determines the Season based on the month.
 * @param {number} month - Birth month (1-12).
 * @returns {string} - Season name.
 */
function getSeason(month) {
    if (month >= 3 && month <= 5) return "Spring";
    if (month >= 6 && month <= 8) return "Summer";
    if (month >= 9 && month <= 11) return "Autumn";
    return "Winter";
}