Make video full width on mobile but normal size on desktop - dawn theme

Store Design
, , ,

Topic summary

Goal: make the homepage video full width on mobile while keeping a normal (non-full-width) size on desktop in the Dawn theme.

Key steps implemented:

  • Added CSS in assets/base.css with a desktop media query (min-width: 768px) to constrain the video section’s width (max-width: 900px) and center it, preventing desktop cropping and oversized display. Padding was also adjusted on desktop.
  • Added a mobile-only media query (max-width: 768px) to remove padding so the video spans full width on phones.

Follow-up adjustment:

  • After the mobile change, the text beneath the video was too close on mobile. A margin-bottom: 30px was added within the mobile media query to restore spacing below the video.

Outcome:

  • Mobile: video displays full width with proper spacing beneath.
  • Desktop: video displays at a constrained, centered width (not full width), addressing the original cropping/oversize concern.

Notes:

  • Changes were done via CSS media queries in base.css targeting the specific video section. The issue appears resolved with no open questions.
Summarized with AI on January 12. AI used: gpt-5.
1

I want to make my video on my website full width on mobile but regular size on desktop. The desktop version is so big that part of the video is cut off on the screen. Please provide a code to solve this issue.

Adjustable Satin Bonnets & Hair Accessories - FeminiqueByCameron LLC

Web capture_17-11-2023_115110_admin.shopify.com.jpeg
Web capture_17-11-2023_115110_admin.shopify.com.jpeg1527×911 140 KB

2

Hi @Anonymous

Kindly paste the below CSS in base.css under assets when you edit code.

@media screen and (min-width: 768px){
.video-section.isolate.page-width.section-template--19026100912401__21977949-112e-4bf6-93aa-125beb845c8d-padding {
	max-width: 900px;
	margin: 0 auto;
}
}
@media screen and (min-width: 768px){
.video-section.isolate.page-width.section-template--19026100912401__21977949-112e-4bf6-93aa-125beb845c8d-padding {
	padding: 0;
}
}

It’ll solve the issue.

Sheesh_b_0-1700508656323.png
Sheesh_b_0-1700508656323.png718×425 123 KB

Mobile Full width

Thanks

Sheesh B

3

The mobile version looks great, but I only wanted the mobile version to be full width of the screen not desktop.

4

Hi @Anonymous

You can paste the below CSS code in base.css at bottom for mobile.

@media screen and (max-width: 768px){
.video-section.isolate.page-width.section-template--19026100912401__21977949-112e-4bf6-93aa-125beb845c8d-padding {
	padding: 0;
}
}

Thanks

Sheesh B

5

It worked, but now the words right beneath the video are too close to the video on mobile version.

6

Hi @Anonymous
Kindly paste the below CSS and it’ll fix the spacing issue.

@media screen and (max-width: 768px){
.video-section.isolate.page-width.section-template--19026100912401__21977949-112e-4bf6-93aa-125beb845c8d-padding {
	padding: 0;
margin-bottom: 30px;
}
}

Thanks

Sheesh B