Responsive main content

  • absahni-1336209527359406192

    Abhishek Sahni (Abhi)

    4 days ago

    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?
    1336209527665852516-360px.png
    1336209528034820157-768px.png
    1336209528399593592-1280px.png
  • whitep4nth3r-1336283571987681311

    salma

    4 days ago

    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
  • whitep4nth3r-1336283869879468032

    salma

    4 days ago

    "using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size"
  • absahni-1337224803156754524

    Abhishek Sahni (Abhi)

    2 days ago

    thank you so much, this was super helpful
    💜1
  • Tod-1337224804700393523

    Tod

    2 days ago

    Great energy @Abhishek Sahni (Abhi)! Your continuous contribution to the toddle Community just made you advance to Community Level 1!

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!

© Copyright 2024 toddle. All rights reserved.