Handling multiple conditions can be done in different ways in programming, such as using If

Question

Handling multiple conditions can be done in different ways in programming, such as using If

I am new to React and trying to implement conditional styling based on screen size. Despite searching the internet, I couldn't find a solution that works for me. Specifically, I want to center some text based on the screen size. Can anyone suggest a better way to achieve this? Currently, my approach is not yielding the desired results.

Update: After adding some logs, I noticed that the 'textAlign' property is not being applied to the element when the screen size is greater than 993px initially. However, it does get set to 'center' between 578px and 993px, but fails to revert back to its original state once the screen size decreases below 578px. It remains centered instead of resetting.

const styles = {
    footerColOne:{
        textAlign: deviceSize > 993 ? "none" : (deviceSize < 993 && deviceSize > 578) ? "center" : "none",
        paddingLeft: deviceSize < 993 ? "26px" : "80px",
        paddingTop: deviceSize < 993 ? "28px" : "63px",
    },
    footerColTwo:{
        textAlign: deviceSize > 993 ? "none" : (deviceSize < 993 && deviceSize > 578) ? "center" : "none",
        paddingLeft: deviceSize < 993 ? "26px" : deviceSize < 578 ? "51px" : "50px",
        paddingTop: deviceSize < 993 ? "40px" : "86px",
    },
  }

To implement these styles, I'm using the following:

<Col lg={3} style={ styles.footerColOne }>

Any assistance would be greatly appreciated.

Latest Update:

Upon further reflection, I've realized that using media queries would be a more suitable approach for this task. While my ternary condition above did work, I mistakenly set 'textAlign' to 'none', which is an invalid value for that property. Instead, it should be set to 'initial' in this scenario.

css reactjs conditional-statements conditional-operator ternary

Answer 1

Answer №1

media query is the perfect solution for this situation.

@media screen and (min-width: 578px) and (max-width: 993px) {
  .someclass {
   text-align:center;
  }
}

@media screen and (max-width: 993px) {
  .someclass {
   text-align:center;
   padding-left:26px;
   padding-right:28px;
  }
}

@media screen and (min-width: 993px) {
  .someclass {
    text-align:left /* as you requested. /*;
  }
}

Therefore,

max-width determines when styles within its media query are applied based on screen size being below that width.

min-width triggers the styles inside its media query to be applied only if screen size exceeds the specified width.

Answer 2

media query is the perfect solution for this situation.

@media screen and (min-width: 578px) and (max-width: 993px) {
  .someclass {
   text-align:center;
  }
}

@media screen and (max-width: 993px) {
  .someclass {
   text-align:center;
   padding-left:26px;
   padding-right:28px;
  }
}

@media screen and (min-width: 993px) {
  .someclass {
    text-align:left /* as you requested. /*;
  }
}

Therefore,

max-width determines when styles within its media query are applied based on screen size being below that width.

min-width triggers the styles inside its media query to be applied only if screen size exceeds the specified width.

Answer 3

Answer №2

function determineDevice(deviceResolution) {
    if (deviceResolution < 993) {
        if (deviceResolution < 993 && deviceResolution > 578) {
            return 'tablet';
        } else {
            return 'mobile';
        }
    } else {
        return 'web';
    }
}

// If CSS is declared, return a class
// Components should use className instead of styles
// <Col lg={3} className={...} />
const footerColOne = {
    'web': () => {
        return {
            textAlign: 'none',
            paddingLeft: '26px',
            paddingTop: '28px'
        };
    },
    'tablet': () => {
        return {
            textAlign: 'center',
            paddingLeft: '80px',
            paddingTop: '63px'
        };
    },
    'mobile': () => {
        return {
            textAlign: 'none',
            paddingLeft: '80px',
            paddingTop: '63px'
        };
    }
};

const styles = {
    footerColOne: footerColOne[determineDevice(deviceSize)]()
};

console.log(styles.footerColOne);

// <Col lg={3} style={styles.footerColOne}>

Answer 4

function determineDevice(deviceResolution) {
    if (deviceResolution < 993) {
        if (deviceResolution < 993 && deviceResolution > 578) {
            return 'tablet';
        } else {
            return 'mobile';
        }
    } else {
        return 'web';
    }
}

// If CSS is declared, return a class
// Components should use className instead of styles
// <Col lg={3} className={...} />
const footerColOne = {
    'web': () => {
        return {
            textAlign: 'none',
            paddingLeft: '26px',
            paddingTop: '28px'
        };
    },
    'tablet': () => {
        return {
            textAlign: 'center',
            paddingLeft: '80px',
            paddingTop: '63px'
        };
    },
    'mobile': () => {
        return {
            textAlign: 'none',
            paddingLeft: '80px',
            paddingTop: '63px'
        };
    }
};

const styles = {
    footerColOne: footerColOne[determineDevice(deviceSize)]()
};

console.log(styles.footerColOne);

// <Col lg={3} style={styles.footerColOne}>

Handling multiple conditions can be done in different ways in programming, such as using If

Answer №1

Answer №2

Similar questions

The code is functioning properly, however it is returning the following error: Anticipated either

Turn off the extra space inserted by DataTables

css: Aligning fonts horizontally when they have varying sizes

Adjusting the sidebarPanel height to match the mainPanel content in a shiny app

Struggling to figure out the right way to make a CSS selector for the Yahoo stocks page

Evaluate One Input Value to Determine Another Input Value

Is there a way to make all cards in material ui the same height?

ReactJS: An error occurred - TypeError: this.state.items.map is not a function

Tips for showcasing the chosen option from an autocomplete input field in a React application

React Datepicker on Safari: A seamless way to pick dates

Issue with the formatting of the disabled button

Using jQuery to locate text and apply a specific class

IE7 is not applying the conditional CSS styles to content loaded through AJAX

Rewrite all uhttpd routes to point to the root directory

I often find that jscodeshift consistently avoids processing my JavaScript files

Adding more pixels to the height of an element does not actually make it larger

Update the CAPTCHA, while also refreshing the entire registration form

New to React - onBlur Event Causes Element to Lose Focus

Can you explain the significance of (.browser-default).valid?

There appears to be no overload that aligns with this call using styled components (index.d.ts(2187, 9))