Help with HTML for my Shopify page |
Help with HTML for my Shopify page |
Michael F |
Jul 11 2019, 12:30 PM
Post
#1
|
Group: Members Posts: 5 Joined: 11-July 19 Member No.: 26,931 |
My page in my Shopify store has HTML to feature 4 videos (can grow). However, these 4 videos look weird on the page.
I would like to have them not so spread apart horizontally on the desktop version. On the mobile version I would prefer a stacked display with 1 video on top of the other instead of 2 videos squeezed in per row. What is a way I can accomplish this without a CSS file. I only have the 1 area where I can put HTMl code and I don't have access to anything outside the BODY tags. This is my page: https://massagetherapyconcepts.com/pages/re...timonial-videos This is the HTML I wrote (note: I don't know HTML as you can see). <h2><span style="color: #cc0000;"><strong>TENS / EMS Units</strong> </span></h2> <table border="0" width="200"> <tbody> <tr> <td> <table width="200" border="0"> <tbody> <tr> <td><iframe src="https://www.youtube.com/embed/VF5zd7rK_UY" allowfullscreen="allowfullscreen"></iframe></td> <td><iframe src="https://www.youtube.com/embed/w3bV_wKWg6M" allowfullscreen="allowfullscreen"></iframe></td> </tr> <tr> <td><iframe src="https://www.youtube.com/embed/I_bEPMKSHTA" allowfullscreen="allowfullscreen"></iframe></td> <td><iframe src="https://www.youtube.com/embed/u58Z5Z9l5A8" allowfullscreen="allowfullscreen"></iframe></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <h4><strong>NOTE: The videos that you see here are <span style="text-decoration: underline;">unsolicited</span>.</strong></h4> <p><a href="https://massagetherapyconcepts.com/collections/tens-ems-units"><strong>See all the TENS Units Here</strong></a></p> |
Christian J |
Jul 11 2019, 01:49 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
I would like to have them not so spread apart horizontally on the desktop version. This CSS file makes TABLE elements 100% wide: CODE table{display:table;table-layout:fixed;width:100%} which overrides the 200 pixel width in the HTML: CODE <table border="0" width="200"> As a result they spread apart in wide enough windows. QUOTE On the mobile version I would prefer a stacked display with 1 video on top of the other instead of 2 videos squeezed in per row. Then it's best to avoid using a table for the layout. QUOTE What is a way I can accomplish this without a CSS file. I only have the 1 area where I can put HTMl code and I don't have access to anything outside the BODY tags. Maybe you can use inline CSS, like this: CODE <div style="max-width: 650px;"> <iframe src=""></iframe> <iframe src=""></iframe> <iframe src=""></iframe> <iframe src=""></iframe> </div> The exact "max-width" value depends on the size of the iframes, of course (you may want to set the IFRAME widths too). QUOTE (note: I don't know HTML as you can see). It's still better than the HTML shopify uses on the rest of the page: https://validator.w3.org/nu/?doc=https%3A%2...timonial-videos |
Michael F |
Jul 11 2019, 02:30 PM
Post
#3
|
Group: Members Posts: 5 Joined: 11-July 19 Member No.: 26,931 |
The code that you provided seems to be working the same way:
display:table="" table-layout:fixed="" width:100="" See the page now. The the second code you gave me breaks up the videos as stacked (1 on top of the other) on the desktop. |
pandy |
Jul 11 2019, 02:53 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Christian didn't give you that. He showed you what you already had...
|
Michael F |
Jul 11 2019, 03:00 PM
Post
#5
|
Group: Members Posts: 5 Joined: 11-July 19 Member No.: 26,931 |
So what should the code be? All of it I mean. It seems like I am having a hard time putting it together.
Thanks |
Christian J |
Jul 11 2019, 04:29 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
Something like this?
CODE <h2><span style="color: #cc0000;"><strong>TENS / EMS Units</strong> </span></h2> <div style="max-width: 630px !important;"> <iframe src="https://www.youtube.com/embed/VF5zd7rK_UY" allowfullscreen="allowfullscreen" style="width: 300px !important"></iframe> <iframe src="https://www.youtube.com/embed/w3bV_wKWg6M" allowfullscreen="allowfullscreen" style="width: 300px !important"></iframe> <iframe src="https://www.youtube.com/embed/I_bEPMKSHTA" allowfullscreen="allowfullscreen" style="width: 300px !important"></iframe> <iframe src="https://www.youtube.com/embed/u58Z5Z9l5A8" allowfullscreen="allowfullscreen" style="width: 300px !important"></iframe> </div> <h4><strong>NOTE: The videos that you see here are <span style="text-decoration: underline;">unsolicited</span>.</strong></h4> You can change the 300px width values of each IFRAME, but then you should probably adjust the 630px width of the DIV as well (in order to make the videos stack in pairs). |
Michael F |
Jul 11 2019, 07:25 PM
Post
#7
|
Group: Members Posts: 5 Joined: 11-July 19 Member No.: 26,931 |
I did it and the videos stack 1 by 1. Is it possible to have 2 rows?
|
Christian J |
Jul 12 2019, 05:06 AM
Post
#8
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
I did it and the videos stack 1 by 1. Is it possible to have 2 rows? Sorry, now I see that some javascript inserts extra DIV elements around every IFRAME, so it all becomes like this (use your browsers Inspector tool to see it all): CODE <div style="max-width: 630px !important;"> <div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/VF5zd7rK_UY" allowfullscreen="allowfullscreen" style="width: 300px !important;"></iframe> </div> <div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/w3bV_wKWg6M" allowfullscreen="allowfullscreen" style="width: 300px !important;"></iframe> </div> <div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/I_bEPMKSHTA" allowfullscreen="allowfullscreen" style="width: 300px !important;"></iframe> </div> <div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/u58Z5Z9l5A8" allowfullscreen="allowfullscreen" style="width: 300px !important;"></iframe> </div> </div> Alas those extra "video-wrapper" DIVs force each video to appear on its own line. Furthermore you can't style the "video-wrapper" DIVs directly in the static HTML, since they're generated by javascript. Try this and see if it fixes it: CODE <div style="max-width: 620px !important;"> <div style="display: inline-block !important; width: 300px !important;"> <iframe src="https://www.youtube.com/embed/VF5zd7rK_UY" allowfullscreen="allowfullscreen" style="width: 300px !important;"></iframe> </div> <div style="display: inline-block !important; width: 300px !important;"> <iframe src="https://www.youtube.com/embed/w3bV_wKWg6M" allowfullscreen="allowfullscreen" style="width: 300px !important;"></iframe> </div> <div style="display: inline-block !important; width: 300px !important;"> <iframe src="https://www.youtube.com/embed/I_bEPMKSHTA" allowfullscreen="allowfullscreen" style="width: 300px !important;"></iframe> </div> <div style="display: inline-block !important; width: 300px !important;"> <iframe src="https://www.youtube.com/embed/u58Z5Z9l5A8" allowfullscreen="allowfullscreen" style="width: 300px !important;"></iframe> </div> </div> |
Michael F |
Jul 12 2019, 07:56 AM
Post
#9
|
Group: Members Posts: 5 Joined: 11-July 19 Member No.: 26,931 |
Works! Amazing! Thank you!!!!
|
Christian J |
Jul 12 2019, 10:00 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
You're welcome!
|
Lo-Fi Version | Time is now: 18th April 2024 - 05:38 AM |