Create Default Container #35

2022-07-28T22:06:03Z

filantrop commented

2022-07-28 22:06:03 +00:00

(Migrated from 85.143.176.51:3000)

Close #12
Create Container component and/or tailwind class

Close #12 Create Container component and/or tailwind class

decamel commented

2022-07-29 06:33:02 +00:00

(Migrated from 85.143.176.51:3000)

By definition of concrete constant width you are breaking responsivity.
To test it - create this container, put some long text inside and resize the window. You will see horizontal scrollbar. We should not have it.

Customize this section in tailwind.config.js

addComponents({
'.container': {
  maxWidth: '100%',
  paddingLeft: '0.5rem',
  paddingRight: '0.5rem',
  '@screen sm': {
    maxWidth: 'calc(100% - 30px)',
  },
  '@screen md': {
    maxWidth: 'calc(100% - 30px)',
  },
  '@screen lg': {
    maxWidth: '960px',
  },
  '@screen xl': {
    maxWidth: '1080px',
  },
  '@screen 2xl': {
    maxWidth: '1080px',
  },
},
});

And apply this class inside you component. BUT don't forget to merge outcoming className with that.

By definition of concrete constant width you are breaking responsivity. To test it - create this container, put some long text inside and resize the window. You will see horizontal scrollbar. We should not have it. Customize this section in `tailwind.config.js` ```ts addComponents({ '.container': { maxWidth: '100%', paddingLeft: '0.5rem', paddingRight: '0.5rem', '@screen sm': { maxWidth: 'calc(100% - 30px)', }, '@screen md': { maxWidth: 'calc(100% - 30px)', }, '@screen lg': { maxWidth: '960px', }, '@screen xl': { maxWidth: '1080px', }, '@screen 2xl': { maxWidth: '1080px', }, }, }); ``` And apply this class inside you component. BUT don't forget to merge outcoming className with that.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Scipaper/Frontend#35