Full page typewriter section

  • Amit K

    (@amitshrikulkarni)


    1 year, 11 months ago

    Hello Team, thank you for such amazing theme. I want to make small change in home page and make the typewriter section as full page. On desktop or mobile it should be full page and when scrolled down rest page is visible. Can you guide how to achieve this?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author shufflehound

    (@shufflehound)

    Hi there,

    Thank you! ??

    If the issue is getting the block to full height then you can use Group block and set Min Height (under Dimensions) to 100 vh.

    Best regards,

    Shufflehound team

    Thread Starter Amit K

    (@amitshrikulkarni)

    Thank you for response. I could not find dimensions section but I tried adding CSS class and adding min-height there. but some how the respective block is getting overflown below the visible area on the screen. Not sure what I am missing here.

    Theme Author shufflehound

    (@shufflehound)

    Can you please try to achieve it by using the cover block? We added a screenshot, so it is easier to understand.

    Thread Starter Amit K

    (@amitshrikulkarni)

    I tried the way you mentioned. Attached is the screenshot. Again there is overflow. The third text paragraph over the cover is not visible here. It says “test bottom”. What I am trying to achieve is one heading in middle and one paragraph to the bottom of the screen. If I resize or open it on mobile it should be the same.

    Theme Author shufflehound

    (@shufflehound)

    Oh, in this block you can only set one position for all of the content. It seems that the cover block won’t work for this use case.

    About the overflow issue we still quite didn’t understand the issue. Without actually seeing it is hard to understand the issue. Maybe you can share a link, so we can take a look?


    Thread Starter Amit K

    (@amitshrikulkarni)

    Hi, I am working on localhost but what I am trying to achieve is like this.

    Codepen Link

    Theme Author shufflehound

    (@shufflehound)

    Hello,

    You can try to copy this block code by switching from Visual Editor to Code Editor:

    <!-- wp:group {"align":"full","style":{"dimensions":{"minHeight":"px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="min-height:px"><!-- wp:spacer {"height":"45vh"} -->
<div style="height:45vh" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Test Heading</h2>
<!-- /wp:heading -->

<!-- wp:spacer {"height":"35vh"} -->
<div style="height:35vh" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p>Scroll for more</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

    Hopefully that helps.

    Best regards,

    Shufflehound team

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Full page typewriter section’ is closed to new replies.