Cover block full width

Hello,

Please try the below CSS code.

.wp-block-cover.alignfull.has-parallax {
    left: -6%;
    min-width: 112%;
}

I would suggest better using the 100% full width for the home page and use the left/right margin for the contents.
Edit the page in WordPress, scroll down at the main tab in oceanwp settings section and choose the 100% full-width layout and check.

Hi Abhishek

The CSS code works great. Thanks!

I dont wanted to use 100% full width because i dont like the following blocks below the cover block to get so close to the browser window edge.

In addition, would you also know the CSS code needed to get the cover block responsive? So that it does not cut the logo (with text) on small screens.
If not, i will use the cover block text option.

Thank you.

Hello,

I apologize for the delay in response.

You can try the below code for the responsive mode.

@media screen and (max-width: 959px){
.wp-block-cover.alignfull.has-parallax {
    left: -6%;
    min-width: 112%;
}
}

PS- Adjust the values in the above code according to the need.

Thanks Abhishek, but the cover-block image will not shrink on small screens.
I dont know if it is possible, the image should adjust automatically on small screen to not get cut the logo-text… possible?

Hello,

That you can achieve using the media queries by adjusting the values according to device size.
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Kindly share snapshots with the marked area which you want to shrink in the mobile view, so I can try to help you with the possible code.

The whole cover-block should shrink on small screen: https://ibb.co/mS4LyQN

I resolved it using two blocks: a cover block for big screens and a image block for smaller screens.

I added then this CSS code to hide one of the two depending on screen size:

===========================================================

/* Hide cover block on screen smaller than 1100px */
@media screen and (max-width: 1100px) {
.wp-block-cover {
display: none;
}
}

/* Hide image block on screen bigger than 1100px */
@media screen and (min-width: 1100px) {
.wp-block-image.alignfull {
display: none;
}
}`

===========================================================

Thanks & Greetings