Hello everyone,i use impulse theme and a section called large video with text box i added and its good on desktop/laptop device but not in mobile,its small and doesnt look good.
Topic summary
A user running the Impulse theme needs help enlarging the “Large Video with Text Box” section on mobile devices—it displays well on desktop but appears too small on phones.
Proposed Solution:
Another participant provided custom CSS targeting .section--large-video-with-text and .video-wrapper with responsive media queries to increase height on mobile (using vh units and min-height).
Implementation Steps:
- Add CSS to
assets/component-video.cssorassets/theme.css - If that fails, create a new
custom.cssfile in Assets - Link the new stylesheet in
layout/theme.liquidbefore the closing</head>tag
Current Status:
The original poster tried both approaches—adding code to assets/theme.scss.liquid and creating custom.css—but reports neither method is working yet. The discussion remains open with troubleshooting ongoing; no resolution has been reached.
Hello @Adewale0021 thanks a lot for your words,i need just in mobile device to look good and size to suit well.So i need help about that as a mention on my question
I was to mobile device and has nothing to change,needs to go deeper to get a video size thst fits well on mobile device
Hello @VisarK
The “Large Video with Text” block in Impulse defaults to a pretty small height on phones to keep load times down, but you can override it with a couple of lines of responsive CSS.
1. Open your theme’s code
In Shopify Admin go to Online Store → Themes → Actions → Edit code
2. Find your stylesheet
Look for assets/component-video.css or assets/theme.css
3. At the bottom, paste this snippet (it targets that section on mobile and boosts its height):
/* Make Impulse Large Video section taller on mobile /
@media (max-width: 749px) {
.section–large-video {
padding-top: 0; / remove extra top gap if needed /
padding-bottom: 0; / remove extra bottom gap if needed /
}
.section–large-video .video-wrapper {
height: 60vh; / adjust this—60% of viewport height /
min-height: 300px; / ensure it never drops below this */
}
}
5. Save and preview on your phone or in a mobile emulator.
Feel free to tweak the 60vh or min-height values until it looks just right. If your video still feels squished, you can bump height: 60vh up to 70vh or even 80vh to fill more of the screen.
Hello @Kudosi-Carlos ,i add to assets/theme.scss.liquid but doesnt work.Should i add to custom css to large video with text box section maybe it works?
Hello @VisarK
If dropping it into assets/theme.scss.liquid didn’t take, let’s try two quick checks:
1. Ensure the selector matches your section
In Impulse the “Large video with text” block actually uses the class .section–large-video-with-text (not .section–large-video). So your CSS needs to target that exact class:
@media (max-width: 749px) {
.section–large-video-with-text {
padding-top: 0;
padding-bottom: 0;
}
.section–large-video-with-text .video-wrapper {
height: 70vh;
min-height: 300px;
}
}
2. Add it to a “custom.css” file
Some themes load theme.scss.liquid before the section CSS, so your rules get overwritten. Instead:
- Create a new file: Assets → Add a new asset → create a blank file named custom.css.
- Paste the snippet above into custom.css and save.
- Then open Layout/theme.liquid, find the closing tag, and add:
- Save and reload your storefront on mobile.
Hello again @Kudosi-Carlos i create a custom.css file in asset,i paste the code above into cuatom.css and to layout theme.liquid i just found this tag and i paste add that but still doesnt show there. Its in this tag good?
@Kudosi-Carlos and now i try the first step also doesnt work