Collection Description Two Columns

Store Design
,
1

I would like to split the collection description into two columns, so text is on the left and the video is on the right with a sensible size:

https://www.physioworldshop.co.uk/collections/three-section-electric-treatment-couches


Addax Treatment Couches are a premium range of medical treatment couches designed to enhance both patient comfort and practitioner efficiency. Shop@PhysioWorld provides these medical couches to practitioners to meet the highest standards in healthcare. We have a range of both electric and hydraulic medical treatment couches in stock, which are available with fast delivery across the UK. Our entire Addax treatment couch range come with a Lifetime Guarantee on their frame and a 5 year warranty on all other components. We offer fast UK delivery, where we deliver and install the couch into the room of your choice.
1 Like
2

Hey @ChrisW3

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1729587661230.png
Moeed_0-1729587661230.png1359×676 203 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @ChrisW3

You can add this code to Custom CSS of that section

.rte--header {
    display: flex;
    flex-direction: row-reverse;
}
@media (max-width: 749px) {
html .rte--header {
    flex-direction: column-reverse;
    align-items: center;
}
}

Screenshot 2024-10-22 at 16.01.58.png
Screenshot 2024-10-22 at 16.01.58.png2550×874 270 KB

4

Hi Moeed, nearly perfect, thank you:

I would ideally like a bit more of a gap between the video and text.

Also it overhangs on mobile

ChrisW3_0-1729587957300.png
ChrisW3_0-1729587957300.png1327×708 89.5 KB

ChrisW3_1-1729588005096.png
ChrisW3_1-1729588005096.png319×582 34.7 KB

1 Like
5

Hey @ChrisW3

Remove the previous code and try this updated code.

RESULT:

Moeed_0-1729588649819.png
Moeed_0-1729588649819.png1329×685 200 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

6

Perfect on desktop, thank you.

Not quite right on mobile, the video goes too close to the right hand margin

1 Like
7

Hey @ChrisW3

Here’s the final updated version of the code that works fine for both devices.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed