Remove white space from cover image (left and right on mobile and tablet views)

  • Greetings,

    The “Cover” image (being used as main banner/hero) looks fine on desktop, but as soon as the resolution drops from 1064 to 1063, there appears white space on the left and right of the cover image. I want the cover image to stretch from edge to edge. Please help.

    Thanks a lot

    PS:
    1. The solution mentioned here doesn’t work for me.
    2. Here are the screenshots explaining the issue. OK at 1064px, White space starts showing from 1063px and smaller

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi @badarjamal

    You can do this with a little bit of custom CSS code.

    Go into your site’s admin Dashboard and select Appearance → Customize →?Additional CSS. In the CSS textbox on the left, add the following code:

    @media screen and (max-width: 1063px) {
  .wp-block-cover.alignfull {
    margin-left: -2.617924em;
    margin-right: -2.617924em;
    width: 100vw;
  }
}

    Select “Save Changes” from the top, and your changes will be applied to your site.

Viewing 1 replies (of 1 total)
  • The topic ‘Remove white space from cover image (left and right on mobile and tablet views)’ is closed to new replies.