Responsive main content
Hi , I have a question regarding responsive layouts . I am building a landing page where I have some text and an image in the main section . I have tried to follow the responsive design principles outlined here : https://toddle.dev/blog/how-toddle-thinks-about-responsive-design I am using rem to size my text and am using a max width of 40 % for the image . This works well for the laptop view but it starts to break when I switch to tablet or mobile . For the tablet view , the text does not resize to the device and overflows behind the image and for mobile the font size is too big and overflowing outside the viewport and the image is too small . I have attached screenshots of the main content for all screen sizes . Any suggestions on what might be happening here ? You might want to look into using clamp ( ) for your text sizes , that way you can specify a larger text size for larger screen sizes https://developer.mozilla.org/en-US/docs/Web/CSS/clamp