Support » Theme: OceanWP » Image with Full Width looks OK in Gutenberg Editor, but not browsing the site

  • Resolved Daniel Payne

    (@djepayne)


    I just started using the OceanWP theme, and on my Home page I placed an Image, then chose Full Width for alignment in the Gutenberg editor. While editing, the image layout is correct, Full Width, however when I browse the page, only the left side of the image if flush with the web browser, and on the right side there’s a large gap of white space between the image and the web browser.

    I get the same issue when converting the Image block into a Cover block.

    Another support page recommended adding some CSS code:

    .alignfull {
      margin-left: calc( -100vw / 2 + 100% / 2 );
      margin-right: calc( -100vw / 2 + 100% / 2 );
      max-width : none;
    	margin-top: 0px;
    }
    .alignfull img {
      width: 100vw;
    	max-width:none;
    }

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Abhishek

    (@abhikr781)

    Hello,

    Seems some custom code you have added which causing the issue, please try to remove all the custom code, switch to the parent theme and check.

    and try the below code and check.

    .alignfull {
        margin-left: calc( -100vw / 2 + 100% / 2 );
        margin-right: calc( -100vw / 2 + 100% / 2 );
        margin-top: 0;
        width: 100vw;
        max-width: 100vw;
    }
    Thread Starter Daniel Payne

    (@djepayne)

    Thanks, your CSS works great, much appreciated.

    Abhishek

    (@abhikr781)

    You are most welcome and glad to hear that solution worked for you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image with Full Width looks OK in Gutenberg Editor, but not browsing the site’ is closed to new replies.