Skip to content

Hero Block - Not displaying responsively on different screen sizes #3530

Open
Open
Hero Block - Not displaying responsively on different screen sizes#3530
Assignees
Arukuen
Labels
bugSomething is not working

Description

@malalacharm
malalacharm
opened on Jun 17, 2025

Describe the bug
When resizing, on smaller screens, background image do not resize properly and get cropped inside columns.

To Reproduce
Steps to reproduce the behavior:

  1. Add a new page
  2. Add a Hero Block
  3. Add a Background Image
  4. See error

Expected behavior
Hero image should scale proportionally within the column.

Screenshots
Image

Image

Activity

  1. malalacharm
    added
    bugSomething is not working
    on Jun 17, 2025

  2. Arukuen commented on Oct 13, 2025

    @Arukuen
    Arukuen
    on Oct 13, 2025
    Contributor

    The cropping of background image is the default behavior, which can be also observed in core/cover. To achieve scaling without cropping, we can explicitly set it using this custom CSS.

    .stk-block-hero .stk--has-background-overlay {
	background-size: contain;
	background-repeat: no-repeat;
	box-shadow: none;
}
  3. Arukuen
    self-assigned this
    on Oct 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

bugSomething is not working

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions