Very popular question and one universal answer:
To have different image/video/other content for mobile and desktop, you create 2 sections – one with desktop content and “Custom CSS” like this:
@media (max-width:749px) {
{ display: none; }
}
Another section will have mobile content and “Custom CSS” like this:
@media (min-width:750px) {
{ display: none; }
}
These CSS codes will only work in “Custom CSS” of a section
Using these codes will show either one section or another, depending on screen width.
Why I recommend 2 sections approach instead of adding extra setting for mobile via code edit?
- It does not require code edits.
- It is more universal – you can apply this approach to any type of section, just by pasting same CSS rules into “Custom CSS” vs.
to add additional mobile setting for 5 types of sections you’d need to modify 5 different files in theme code… - Then you can fine tune mobile section to look good on mobile and desktop section to look good on desktop… Having both mobile and desktop on the same section will require extra settings, like “Mobile height” in addition to “Desktop height”…
Some drawbacks are possible, but can be fixed with minor CSS tweak.
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it