Center video on desktop with text underneath

Store Design
, , ,

Topic summary

A Shopify store owner using the Dawn theme needs help repositioning a video and text layout. Currently, the video displays on the left with text/caption on the right on desktop; they want the video centered and enlarged with text positioned below it.

Solutions Offered:

  • Basic approach: Add CSS to change flex-direction to column and set both media and text items to 100% width
  • Desktop-only solution: Wrap the CSS in a media query (@media screen and (min-width: 750px)) targeting the .custom-video-container class
  • Alternative method: Modify base.css file directly with custom width settings and flex-grow properties

All solutions include code snippets and visual examples showing the desired vertical layout.

Current Status:

The original poster implemented one solution successfully but reports the text is not centered. The discussion remains open with this alignment issue unresolved.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

How do I make the video large and center on a desktop with the text below it? Right now, the video is on the left, and the text/caption is on the right. The theme is Dawn.
http://notagrownup.net

1 Like
2

Please add this code to Custom CSS of that section

.image-with-text__grid { flex-direction: column; }
.image-with-text__media-item,
.image-with-text__text-item { width: 100%; }

Screenshot 2025-05-08 at 11.12.54.png
Screenshot 2025-05-08 at 11.12.54.png2398×2302 1020 KB

3

Hi @Notagrownup

let try to add this custom css to apply this code for desktop only:

@media screen and (min-width: 750px){
  .custom-video-container .image-with-text .grid {
    flex-direction: column;
  }
  .custom-video-container .image-with-text__media-item, .custom-video-container .image-with-text__text-item{
    width: 100%;
  }
}

The result will like:

BiDealDiscount_0-1746679021988.png
BiDealDiscount_0-1746679021988.png1574×950 231 KB

4

Hello @Notagrownup
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.custom-video-container .image-with-text__media-item {
width: 51% !important;
}
@media screen and (min-width: 750px) {
.image-with-text__media-item--large + .image-with-text__text-item {
flex-grow: 1;
}
}

result

21.png
21.png1340×607 219 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
5

This was very helpful, but the text isn’t centered. Is that an easy fix?