My live page: https://lifexlabsco.com/products/ear-cleaner
I have pieced together this section for my website using flex containers, and it works for the most part, but I do have a few issues. All of the rows are supposed to break down into a single column layout @media 768px.
The 1st & 3rd do so properly, with the image falling down below the text, but the second (where the image is aligned to the right instead of the left), the image end up sitting above the text instead.
I also need the text to be cantered inside each row like in the example below.
I am totally inexperienced so excuse that. If someone could please help me reformat this so that it works for that row as well, that would be awesome.
I am trying to emulate the exact same section on the following example site:
https://hismileteeth.com/products/colour-corrector
Here is the current code:
<style> .flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1080px;
margin: auto;
}
.flex-container > div {
margin: 10px;
padding: 0px;
flex: 1 1 100%;
max-width: 100%;
text-align: left;
}
.flex-container-reverse {
display: flex;
flex-direction: column;
align-items: flex-start;
}
@media (min-width: 768px) {
.flex-container {
flex-direction: row;
}
.flex-container > div {
flex: 1;
max-width: 48%;
}
.flex-container:nth-child(even) > div:first-child {
order: 2;
}
.flex-container:nth-child(odd) > div:first-child {
order: 1;
}
}</style>
<div class="flex-container">
<div class="flex-container-reverse">
<h2>Step 1.</h2>
<h3>Connect The App</h3>
<p>Easily pair your phone with the easy-to-use mobile app available for both IOS & Android devices.</p>
</div>
<div>
<video muted="muted" loop="loop" autoplay="" playsinline="" preload="auto" width="100%">
<source src="https://cdn.shopify.com/videos/c/o/v/c1ac052147024dd586ec13e1b0e29617.mp4?v=1632715790">
</video>
</div>
</div>
<div class="flex-container">
<div>
<video muted="muted" loop="loop" autoplay="" playsinline="" preload="auto" width="100%">
<source src="https://cdn.shopify.com/videos/c/o/v/c1ac052147024dd586ec13e1b0e29617.mp4?v=1632715790">
</video>
</div>
<div class="flex-container-reverse">
<h2>Step 2.</h2>
<h3>Clean</h3>
<p>Begin your journey into a place you've never seen before and learn what's lurking inside your ear canal. You'll be guided along by a live, real-time display of everything so you can clean with ease.</p>
</div>
</div>
<div class="flex-container">
<div class="flex-container-reverse">
<h2>Step 3.</h2>
<h3>Carry on</h3>
<p>Dispose of the wax you've removed, and enjoy life free from any fear of unsightly ears, or any discomfort and loss of hearing that can come from blockages.</p>
</div>
<div>
<video muted="muted" loop="loop" autoplay="" playsinline="" preload="auto" width="100%">
<source src="https://cdn.shopify.com/videos/c/o/v/370fc17aa3554649b393cc86267827ff.mp4">
</video>
</div>
</div>
Thank you in advance for any assistance.
Hi @Project_ATLAS
Please add more of this CSS code to your existing style code
@media (max-width: 767px){
.flex-container-reverse { order: 2 !important; }
}
Thank you friend. They seem to be ordered now, but I need them to go:
Heading
Paragraph
Image/video
Heading
Paragraph
Image/video
Heading
Paragraph
Image/video
Currently it is in reverser like this:
Image/video
Heading
Paragraph
Image/video etc.
Can I also ask if you know how I can get each block of text to be vertically aligned in the center of the row?
Please update the code to this
@media (max-width: 767px){
.flex-container-reverse { order: 1 !important; }
.flex-container > div { order: 2 !important; }
}
I don’t get your last question “Can I also ask if you know how I can get each block of text to be vertically aligned in the center of the row?”
Could you explain a little more?
Thank you. But now I have the same problem I started with, where the video in the second row goes above rather than below.
In terms of the vertical alignment, you can see what I mean here:
Please remove the previous code I sent you and update your in your custom liquid code
## Step 1.
### Connect The App
Easily pair your phone with the easy-to-use mobile app available for both IOS & Android devices.
## Step 2.
### Clean
Begin your journey into a place you've never seen before and learn what's lurking inside your ear canal. You'll be guided along by a live, real-time display of everything so you can clean with ease.
## Step 3.
### Carry on
Dispose of the wax you've removed, and enjoy life free from any fear of unsightly ears, or any discomfort and loss of hearing that can come from blockages.
Hey thank you. That’s perfect. I just need to get the text blocks to be aligned with the center of each video/image.
Please update code
## Step 1.
### Connect The App
Easily pair your phone with the easy-to-use mobile app available for both IOS & Android devices.
## Step 2.
### Clean
Begin your journey into a place you've never seen before and learn what's lurking inside your ear canal. You'll be guided along by a live, real-time display of everything so you can clean with ease.
## Step 3.
### Carry on
Dispose of the wax you've removed, and enjoy life free from any fear of unsightly ears, or any discomfort and loss of hearing that can come from blockages.
Thank you. You are beautiful wizard man! ??
But now for some reason the videos are not autoplaying on mobile.
Hi @Project_ATLAS
Please try to update code and check again
## Step 1.
### Connect The App
Easily pair your phone with the easy-to-use mobile app available for both IOS & Android devices.
## Step 2.
### Clean
Begin your journey into a place you've never seen before and learn what's lurking inside your ear canal. You'll be guided along by a live, real-time display of everything so you can clean with ease.
## Step 3.
### Carry on
Dispose of the wax you've removed, and enjoy life free from any fear of unsightly ears, or any discomfort and loss of hearing that can come from blockages.
Unfortunately I’m still getting the same problem for some reason.
Did you try to reload your page and check again after updating the code?
Here is the result on my side
Yes I did. We’re only talking about on mobile devices this is happening though, not desktop.
What is the issue on mobile devices?
On mobile, the videos are not autoplaying.
Which device did you check? I have checked on my iPhone and it autoplay. Could try to clear browser cache of your mobile and check again?
I’m also using an iPhone. I’ve just checked in both Safari & Chrome which are displaying the same issue.
