If/else statement for dynamic html on mobile vs desktop

Ask the community
, ,
1

Hey folks -

I’m having an issue with my content not generating when trying to use if/else statements to change font size on mobile vs desktop.

I have some database content pages for which I am populating a text field with a different text color (hex retrieved from database). I adapted the following code that I found on the forum to do this as follows (this code works fine for desktop, but it means that I can’t modify the size of the text to display properly on mobile):

$w . onReady (() => {
$w ( “#dynamicDataset” ). onReady ( () => { //instead of “dataset1” use your dataset property id
let item = $w ( “#dynamicDataset” ). getCurrentItem ();
let rating = item . lowkeyScore ;
let ratingColor = item . lowkeyScoreColor ;

    $w ( "#text56" ). html  =   `<h2 class="font_2" style="font-size:126px;text-align:center"><span style="color: ${ ratingColor } "> ${ rating } </span></h2>` ; 
})

})

Using some tips I found here, I wrote the following to try to simply change the “font-size:” portion of the html when on mobile. However, with this code I get an error (" Unexpected token, expected “,” (16:5) - which points to a spot at the last character in the code) and while the font change works, the dynamic text from content manager no longer loads, I.e. it just loads black placeholder text on both mobile and desktop:

import wixWindow from ‘wix-window’ ;

$w . onReady (() => {
$w ( “#dynamicDataset” ). onReady ( () => { //instead of “dataset1” use your dataset property id
let item = $w ( “#dynamicDataset” ). getCurrentItem ();
let rating = item . lowkeyScore ;
let ratingColor = item . lowkeyScoreColor ;

**if** ( wixWindow . formFactor  ===  "Mobile" ){  
        $w ( "#text56" ). html  =   `<h2 class="font_2" style="font-size:80px;text-align:center"><span style="color: ${ ratingColor } "> ${ rating } </span></h2>` ; 
        }       
    **else if**  ( wixWindow . formFactor  ===  "Desktop" ){   
        $w ( "#text56" ). html  =   `<h2 class="font_2" style="font-size:126px;text-align:center"><span style="color: ${ ratingColor } "> ${ rating } </span></h2>` ; 
        } 
}

Anyone have any ideas what I’m doing wrong here? Thanks in advance!