Pricing Blog

Designing below the fold

  • jreed5-1335070835404308561

    jackson

    5 months 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

    5 months 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

    5 months 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

    5 months 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

    5 months 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

    5 months 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

    5 months ago

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

    Tod

    5 months ago

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

    jackson

    5 months 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!
  • lucasg-1335106070133084191

    Lucas G

    5 months 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

    5 months 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

    5 months 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

    5 months 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