# 🤔 How to?: Combine an image with a text component (w/ video)

**URL:** <https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961>\
**Category:** Ask for Help\
**Created:** [April 30, 2024, 9:51pm UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961 "2024-04-30T21:51:42Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 3, 2024, 12:32am UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961/6 "2024-05-03T00:32:28Z")

</div>

The two images I loaded above are desktop views using containers.  
Using an overlay with a background image may encounter issues in responding to various user screen sizes. I recommend the second method, which is drawing with CSS. However, this will require simplification and cannot fully replicate your graphics.  
See how it work.

> [@How to Maintain Container Layout on Mobile Devices](https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021):
>
> Seeing a desire to maintain a container layout that is not responsive to mobile devices, you can still achieve this through the “grid-template-columns” code. Here’s the code you need to add to your application’s custom CSS: .grid-container .oneToOne { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .grid-container .oneToOne \> div \> div { justify-content: initial; } Note: class name is grid-container

---

_[View the full topic](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961)._