The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help with HTML for my Shopify page
Michael F
post 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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 11 2019, 01:49 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,239
Joined: 10-August 06
Member No.: 7



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

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 smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Michael F
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 11 2019, 02:53 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,403
Joined: 9-August 06
Member No.: 6



Christian didn't give you that. He showed you what you already had...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Michael F
post 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.

smile.gif

Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 11 2019, 04:29 PM
Post #6


.
********

Group: WDG Moderators
Posts: 8,239
Joined: 10-August 06
Member No.: 7



Something like this?

CODE

<h2><span style="color: #cc0000;"><strong>TENS / EMS Units</strong>&nbsp;</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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Michael F
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 12 2019, 05:06 AM
Post #8


.
********

Group: WDG Moderators
Posts: 8,239
Joined: 10-August 06
Member No.: 7



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
<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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Michael F
post Jul 12 2019, 07:56 AM
Post #9





Group: Members
Posts: 5
Joined: 11-July 19
Member No.: 26,931



Works! Amazing! Thank you!!!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 12 2019, 10:00 AM
Post #10


.
********

Group: WDG Moderators
Posts: 8,239
Joined: 10-August 06
Member No.: 7



You're welcome!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd October 2019 - 01:31 PM