Image in the middle of two containers? (Responsive)

I was wondering if it is possible to put an image between two containers. Basically what I want to apply is the same thing with AppGyver website’s video. I tried to play with margins or absolute positions but could not get the responsive results in mobile.

Would appreciate your help and ideas!

Hey there, mate. I’m not really sure what you’re indicating with the image you’re shared. If you mean to literally place an image between two container (so an image in the center with, say, text in containers on either side), the simplest way would be to use a Row from the left-side component tray in Composer. The default number of cells for a Row are two but, by going into the Style tab, you can add as many cells as you need.

You could then nest an image in the middle cell and whatever else on either side. Unless I’m misunderstanding you. :slight_smile:

Hello Dominic,

Sorry, I should have been more specific :slight_smile: What I mean is to place an image between two vertical containers - similar to the AppGyver’s video in their website, which is placed between white and gray background. I have managed that by placing the picture into the gray container then adding a negative margin however it didn’t work well with different screen sizes.

You absolutely can. It’s a bit convoluted, though, depending on your experience with Composer and I can’t guarantee you that it will render correctly in every scenario – just did it myself now for the first time. Here’s a view of it in Composer:

  1. You’ll need a minimum of four containers. As you’ll see in the image above and in the tree image below, we have the Master Holding Container, which I’ve made visible by adding the white border outline. You might choose to leave that “invisible” by not adding advanced styling. Nested inside that holding container are your three sub-containers stacked vertically.
    The tree:
    Screenshot 2021-05-15 124024

  2. The Bluish Container with Text is then set to Absolute under the Advanced Properties section of the component’s Style tab – scroll down all the way to the bottom and expand that section:
    Screenshot 2021-05-15 124220

  3. The “Bluish” container will then snap to the top of your Master Holding Container. If it appears to disappear, don’t worry, it’s just behind one of the “white” containers. We’ll fix this now. In the Style tab for the Bluish container, scroll back up to the Dimension and Position section and click over to the Position tab as indicated in the picture below:
    Screenshot 2021-05-15 124923

  4. In order to ensure your Bluish container always renders in front of the two white containers, change the Z-index field to a minimum of 1. After that, simply apply an increasing or decreasing number to the Top field to force that container down into the position you want. You could also apply a high margin value to the Bluish container to force it down as well. I’d say, it’s a matter of preference. As you add content to the white containers, you may have to adjust the Bluish container’s position over time.

The biggest points are to set the floating Bluish container to Absolute and give it a higher Z-Index.

Rendering the page in the web preview (I removed the white border of the holding container), it appears to work fine:

Hope that helped.

1 Like

Ah, right, you said image. Just substitute the Bluish container with your image and it should still work. Make sure you set a firm width and height to you image if you’re using a “naked” image component, i.e. not nested into a container. You can also apply an image directly as the background of a container, allowing you to easily nest things like buttons, text, and icon directly into the container.

Hi Dominic,

Thanks for the detailed explanation! I applied your logic of nested containers but instead I have inserted the blue container into the below container. Although I couldn’t get the responsive results with the absolute, relative worked to an extend. I have “boosted” the above container’s margin so now it works.

I think some formulas for the margins based on the screen size could achieve the best responsive results.

Thanks a lot!

1 Like

Glad you got it to work!

What’s up with the responsive settings? Need help there?