How to achieve image layout that goes to edge of viewport?

Styling (CSS)
1

Hey!
I’m just starting to use PG and getting through the learning curve. I’ve used Oxygen for many years, so most of my experience is in that world and not actually knowing much about CSS.

So… not sure if this is a situation where I just don’t know enough CSS or I don’t know how to use PG still (only been using it for a few days.)

What I’m trying to achieve is the layout of the hero section of this page: https://master1.massagepixels.com (built in Breakdance).

I can’t figure out how to get the image to go to the right edge of the viewport. I’ve used the same CSS rules as what I did in Breakdance and it just doesn’t do what it’s told :slight_smile: I’m probably missing something though.

I’ll attach what it looks like in PG currently.

Any help would be great. Thanks!

Screenshot 2024-04-10 at 7.30.12 PM
Screenshot 2024-04-10 at 7.30.12 PM1843×932 180 KB

2

Hi ChrisUT, can you share a url to the page you did with pinegrow? Then we can check the CSS :wink:

3

Hey Guido, thank you for the reply.

Here’s the page URL: Test with Pinegrow Blocks | Master Client (had some issues getting it to show up using blocks)

4

There are multiple ways to achieve this but here is one:

.section__welcome-mat {
    position: relative;
    min-height: 80vh;
    display: flex;
}

Add a class to the image example .hero-img

.hero-img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50vw;
    object-fit: cover;
}

And put a z-index on your header.

z-index: 9;

That should do the trick :wink:

5

That did do the trick! I really appreciate it!

6

Hey @Guido , could I get your insight on one other issue?

Now the way it shows up in the Gutenberg Editor isn’t reflective of how it is on the front end. I’m guessing this is because there is the panel on the right in the editor which effectively pushes the image to the left.

Is there a way to not apply certain CSS rules in the editor? Or some other way so that it displays properly in the editor?

Screenshot 2024-04-11 at 12.40.55 PM
Screenshot 2024-04-11 at 12.40.55 PM1647×911 83.1 KB

7

Hey @ChrisUT

That should show up correctly in the editor. Did you try to clear your cache or do a hard refresh on your browser? Hard refresh: Hold CTRL click F5 for windows.

Otherwise you should check it in dev tools to see what’s going on. F12. I would say for 99% of the time it reflects the front-end but sometimes it’s a bit off depending on how it is set up and what Gutenberg is adding css wise.

In my theme settings i have all the style sheets loaded for the block editor:
image

image

I have wp-blocks.css only in the block editor. The other ones are also loaded on the front-end.

I have for example this in my wp-blocks.css:

.edit-post-visual-editor__post-title-wrapper h1 {
  font-size: 3rem;
  color: var(--black);
}

body {
    padding-inline: 2rem;
}

To make sure the title (H1) at the top stays black if i have H1 set to white for example.

And the body just adds some padding left and right in the block editor.