Hi,
I have 2 videos on my product page, I would like the first one only visible on mobile & the second one only visible on desktop.
Thanks for your help!
Alex
Hi. I think I can help you. I was examining your code and realized that you were augmenting the code with fields.
Add these lines to your code in section 1 of the video:
@media screen and (min-width: 769px) {
video {
display: none;
}
}
video {
width: 60%;
height: auto;
display: block;
margin: 0 auto;
}
Also add this code to the 2nd section of your video:
@media screen and (max-width: 750px) {
.video {
display: none;
}
}
1 Like
Hi @romartiny
thanks for your help, it worked!
would you know how to align on desktop the text on right of the video like the other sections?
‘I would like this text like the picture just below the video.
thanks for your help!
Could you give me a link?
edl
.posrel {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.video {
display: flex;
justify-content: flex-end;
}
video {
margin: 0px !important;
}
.posoverlay {
display: flex;
flex-direction: column;
justify-content: center;
}
Thanx @romartiny is it to add in base.css or on the custom liquid of this section? 
You can put that in the sections.
Hi @romartiny ,
Thank you very much it worked!
Maybe small adjustments if you can help me:
-
I want the video a bit bigger (same size than the images)
-
I want to invert video & text (if possible text aligned like the image bellow)
Thank you in advance
For video (add this line width: 100%):
video {
width: 100%;
}
I don’t see your screenshot. Do you need to swap the video and text?
thank you @romartiny
yes I need to swap the video & text, like here
If possible the text with the same alignment than the picture bellow
video {
width: 76%;
}
.video {
display: flex;
justify-content: flex-start;
margin-right: -110px;
width: 66%;
}
.posrel {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.posoverlay {
display: flex;
flex-direction: column;
justify-content: center;
width: 475px;
height: 550px;
}
The past answer was Text → Photo, now Photo → Text
Enjoy
Wahoo @romartiny thank you so much!
Could you also help me for this image section section that is on my product info?
I would like this section to look like this, on this website https://www.solawave.fr/products/radiant-renewal-skincare-wand-with-red-light-therapy
Create please new thread and send me link
This is the new thread @romartiny
https://community.shopify.com/c/shopify-design/dawn-adjust-css-on-a-section/m-p/2233113#M591257
Thank you