-
Posts
-
Hello,
first thank you for the Enfold Theme and that great support. It helped me a lot.
But for one topic I could not find a solution.
I like to show Videos in full width, but only on mobile phone.
I created a color id with the name showreel. And than I put that code:
/* Color showreel */
#showreel .container {
width: 100% !important;
min-width: 100%;
padding: 0;
margin: 0;
}
It works really well on mobile phone. But the Video is too big on Desktop. So the Visitor need to scroll up and down to see the Video.How can I resize the Video on my desktop page. But keep the Video in full width on mobile?
You can see the result here: https://afrank-3d.de/showreel/
Thank you very much!
Hey xeyart,
Thank you for the inquiry.
We could set it so that the css modification is only applied on mobile view or on smaller screens. We can do that by wrapping the modification inside a css media query.
Example:
@media only screen and (max-width: 768px) { #showreel .container { width: 100% !important; min-width: 100%; padding: 0; margin: 0; } }The css rule above will only be applied when the screen width is less than 768px. Please check the article below for more info about css media queries.
// https://css-tricks.com/a-complete-guide-to-css-media-queries/
Best regards,
IsmaelHey Ismael,
This is exactly what I wanted. Thank you very much!
And thank you for the Tipps below.Best regards,
Alex
- The topic ‘Fullscreen video only on mobile device’ is closed to new replies.