How can I create a responsive UI using css for the following code snippet?
<Text className="w-100 mt-0 align-self-center">
Lorem ipsum Lorem ipsum Lorem ipsum<span>{'$200'}</span>
</Text>
<Text className="w-100 mt-0 align-self-center">
Lorem ipsum<span>{'$100'}</span>Lorem ipsum
</Text>
<Text className="w-100 mt-0 align-self-center">
{"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"}
<Button
className="link-button"
variant={VARIANTS.LINK}
>
<ButtonText>{'here'}</ButtonText>
</Button>
</Text>The styles for Text and Button are as follows:
const Text = styled.div`
font-family: ${(props) => props.theme.font.base};
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
color: ${(props) => props.theme.colors.text.secondary};
a,
button {
text-decoration: underline currentColor;
&:hover:not(:disabled) {
text-decoration-color: transparent;
}
}
span {
font-weight: 600;
white-space: nowrap;
@media screen and (max-width: ${breakpoints.desktop}px) and (min-width: ${breakpoints.laptopL}px) {
margin-top: 25px !important;
}
@media screen and (max-width: ${breakpoints.tablet}px) {
margin-top: 25px !important;
}
}
`; I am currently facing issues with the responsive view of this UI. How can I adjust the styles to make it work smoothly on all devices? Any assistance would be greatly appreciated.