# How to achieve image layout that goes to edge of viewport? **URL:** \ **Category:** Styling (CSS)\ **Created:** [April 11, 2024, 1:31am UTC](https://forum.pinegrow.com/t/how-to-achieve-image-layout-that-goes-to-edge-of-viewport/8855 "2024-04-11T01:31:48Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![ChrisUT](https://avatars.discourse-cdn.com/v4/letter/c/848f3c/32.png) [@ChrisUT](https://forum.pinegrow.com/u/ChrisUT)\ **Post date:** [April 11, 2024, 1:31am UTC](https://forum.pinegrow.com/t/how-to-achieve-image-layout-that-goes-to-edge-of-viewport/8855/1 "2024-04-11T01:31:48Z")
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](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 🙂 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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/5d35aa45dc78bd18fd710e40de303960e4869c7e.jpeg) ---
**Author:** ![Guido](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/guido/32/4958_2.png) [@Guido](https://forum.pinegrow.com/u/Guido)\ **Post date:** [April 11, 2024, 2:18pm UTC](https://forum.pinegrow.com/t/how-to-achieve-image-layout-that-goes-to-edge-of-viewport/8855/2 "2024-04-11T14:18:57Z")
Hi ChrisUT, can you share a url to the page you did with pinegrow? Then we can check the CSS 😉 ---
**Author:** ![ChrisUT](https://avatars.discourse-cdn.com/v4/letter/c/848f3c/32.png) [@ChrisUT](https://forum.pinegrow.com/u/ChrisUT)\ **Post date:** [April 11, 2024, 3:17pm UTC](https://forum.pinegrow.com/t/how-to-achieve-image-layout-that-goes-to-edge-of-viewport/8855/3 "2024-04-11T15:17:16Z")
Hey Guido, thank you for the reply. Here’s the page URL: [Test with Pinegrow Blocks | Master Client](https://master1pinegrow.massagepixels.com/test-with-pinegrow-blocks/) (had some issues getting it to show up using blocks) ---
**Author:** ![Guido](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/guido/32/4958_2.png) [@Guido](https://forum.pinegrow.com/u/Guido)\ **Post date:** [April 11, 2024, 4:18pm UTC](https://forum.pinegrow.com/t/how-to-achieve-image-layout-that-goes-to-edge-of-viewport/8855/4 "2024-04-11T16:18:23Z")
There are multiple ways to achieve this but here is one: ```auto .section__welcome-mat { position: relative; min-height: 80vh; display: flex; } ``` Add a class to the image example .hero-img ```auto .hero-img { position: absolute; top: 0; right: 0; height: 100%; width: 50vw; object-fit: cover; } ``` And put a z-index on your header. ```auto z-index: 9; ``` That should do the trick 😉 ---
**Author:** ![ChrisUT](https://avatars.discourse-cdn.com/v4/letter/c/848f3c/32.png) [@ChrisUT](https://forum.pinegrow.com/u/ChrisUT)\ **Post date:** [April 11, 2024, 6:20pm UTC](https://forum.pinegrow.com/t/how-to-achieve-image-layout-that-goes-to-edge-of-viewport/8855/5 "2024-04-11T18:20:22Z")
That did do the trick! I really appreciate it! ---
**Author:** ![ChrisUT](https://avatars.discourse-cdn.com/v4/letter/c/848f3c/32.png) [@ChrisUT](https://forum.pinegrow.com/u/ChrisUT)\ **Post date:** [April 11, 2024, 6:41pm UTC](https://forum.pinegrow.com/t/how-to-achieve-image-layout-that-goes-to-edge-of-viewport/8855/6 "2024-04-11T18:41:17Z")
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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/421654bf508020757215b5961a52944b84cab9bf.jpeg) ---
**Author:** ![Guido](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/guido/32/4958_2.png) [@Guido](https://forum.pinegrow.com/u/Guido)\ **Post date:** [April 12, 2024, 9:56am UTC](https://forum.pinegrow.com/t/how-to-achieve-image-layout-that-goes-to-edge-of-viewport/8855/7 "2024-04-12T09:56:51Z")
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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9672a257919f086a14bb45a599e739f271a4810f.png) ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/090457235476a045cbc5485acc1b324c511429ae.png) 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: ```auto .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.