Designing below the fold

  • jreed5-1335070835404308561

    jackson

    7 days ago

    I'm almost embarrassed to ask this but how do you design below the fold and see the elements you're editing? When I scroll, it scrolls on the canvas, not the screen. I can change the screen size but that changes the how the elements are aligned. I attached a screenshot where it cuts off at the fold. Thanks for any help!
    1335070835722948638-Screenshot_2025-01-31_at_6.06.48_PM.png
  • plusmin-1335082309430415461

    Armand

    7 days ago

    Press ‘T’ scroll down, press ‘T.
    But the elements often re-render when you make a change and then it moves back to the top.

    So probably best to enlarge the screen, but only by dragging it down. And then just drag the whole screen down to what you are working on.
  • I hope that makes sense. I’m on mobile now, otherwise I’d make a quick video
  • jreed5-1335083083866570783

    jackson

    7 days ago

    Thanks, though I don't think that's what I'm referring to. "T" is the same as test, as i understand it. I'm just trying to work on elements below the fold
  • Or are you saying that that's the only way to view below the fold?
  • jreed5-1335083737427480626

    jackson

    7 days ago

    Like I want to see the Paragraph element I'm working on so I can decide how much padding, for example. The work around I'm doing is creating a component
  • lucasg-1335086562001551430

    Lucas G

    7 days ago

    Hover on the bottom border of the preview, you should see a handle to resize it.
    Same for the right border to adjust the preview’s width
  • Double-clicking it should adjust it to the max height of your content
  • jreed5-1335087090823725178

    jackson

    7 days ago

    Hi Lucas, I believe you're suggesting changing the screen size, right?
  • the challenge there is it changes other elements on the page (ex. my hero div 100% length just extends, and the h1 centered moves down, etc.)
  • jreed5-1335087652868849665

    jackson

    7 days ago

    I just want to design on a screen as if I scrolled
  • Tod-1335087654114557963

    Tod

    7 days ago

    Great energy @jackson! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
  • jreed5-1335088061687660646

    jackson

    7 days ago

    Okay, I figured it out. Perhaps I misunderstood Armand's suggestion. I just need to go into Test mode, scroll down, and then go out of test mode while on the element I want to design. Perhaps there's another way to do that but it's simple enough
  • Thank you Lucas and Armand, I greatly appreciate the help!
    👍1
  • lucasg-1335106070133084191

    Lucas G

    7 days ago

    Sounds like you’re trying to design for a very specific screen size.
    Do you have a specific use case?
  • Any reason why a responsive design doesn’t work
  • jreed5-1335112442665238540

    jackson

    7 days ago

    I'm not trying to design for a specific screen size really, just a responsive design. I was just trying to see the P element while I designed for it but because it wasn't on the screen, it wasn't showing up (I included an image to try and show this)
  • jreed5-1335112874217046100

    jackson

    7 days ago

    In other tools, you can scroll down to design for elements below the fold. The docs nor the AI assistant had information about it
  • lucasg-1335133661791522817

    Lucas G

    7 days ago

    I understood the issue you were having, yes. You can resize the canvas for both width and height. Resizing the height shouldn't affect your design though
    👍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.