Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Help with HTML for my Shopify page

Posted by: Michael F Jul 11 2019, 12:30 PM

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/reviews-and-testimonial-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>

Posted by: Christian J Jul 11 2019, 01:49 PM

QUOTE(Michael F @ Jul 11 2019, 07:30 PM)

I would like to have them not so spread apart horizontally on the desktop version.

https://cdn.shopify.com/s/files/1/0193/9603/4659/t/5/assets/timber.scss.css?8500 makes TABLE elements 100% wide:

CODE

table{display:table;table-layout:fixed;width:100%}

which overrides the 200 pixel width in the HTML:

CODE

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

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%2F%2Fmassagetherapyconcepts.com%2Fpages%2Freviews-and-testimonial-videos

Posted by: Michael F Jul 11 2019, 02:30 PM

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.

Posted by: pandy Jul 11 2019, 02:53 PM

Christian didn't give you that. He showed you what you already had...

Posted by: Michael F Jul 11 2019, 03:00 PM

So what should the code be? All of it I mean. It seems like I am having a hard time putting it together.

Thanks

Posted by: Christian J Jul 11 2019, 04:29 PM

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).

Posted by: Michael F Jul 11 2019, 07:25 PM

I did it and the videos stack 1 by 1. Is it possible to have 2 rows?

Posted by: Christian J Jul 12 2019, 05:06 AM

QUOTE(Michael F @ Jul 12 2019, 02:25 AM)

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

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

Posted by: Michael F Jul 12 2019, 07:56 AM

Works! Amazing! Thank you!!!!

Posted by: Christian J Jul 12 2019, 10:00 AM

You're welcome!