Offset image inside container

[Eric]

Hi GP Team,

Pardon the poorly written explanation, I created a short explainer video to help. But I’m trying to offset an image within a container and was able to achieve what I was going for on the backend, but when I preview the page on the frontend, the image doesn’t offset as shown in the backend editor.

Here’s the explainer video for additional context and visual examples: https://share.vidyard.com/watch/g3sjSmq1GxKDPSDkxkAJtb?

Please let me know if you have any ideas on how to solve my issue or if you have a better way to accomplish the look I’m going for. Many thanks!

I’m much savvier with Elementor and just getting my feet wet with using GP/GB so I’m experiencing a bit of a learning curve, but I’m looking forward to getting up to speed with GP/GB and reaping the performance rewards.

Cheers

[Tom]

Hey Eric,

Instead of messing with margins, you may want to play with a gradient: https://www.screencast.com/t/tmeJesXYVfF

If you give it a vertical gradient (90deg) and set your two colors, you can then use the stop positions to choose when the colors change. For example, setting both to 75 will make the colors switch at 75% of the container.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Eric]

That’s a great tip, Tom! I’ve got a lot to learn.

Worked like a charm.

Thank you!

[Tom]

Glad I could help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts