Video size in desktop

[Rebecca Morency]

Hi Bill,

For videos to size well on the mobile site, I eliminated the height and width in the desktop iframe. Is there some way to make the video size to the desktop and size to the mobile?

Thanks for your help.

Becky

[Bill Robbins]

Hi Becky,

You can make the video responsive. Before the video place this:

[fit]

and after it, add this:

[/fit]

and that should make the video size appropriately for mobile and desktop. Let me know if you run into any trouble.

Take care,
Bill

[Rebecca Morency]

Worked perfectly. I found all kinds of complicated code to handle this and was hoping you’d have a simple solution. You did! Thanks a bunch.

One more thing…
Before responsive, we used grid and then div code to align images horizontally. On mobile, they aligned oddly so now they’re just stacked on the desktop.

Here’s a link to show what I mean: http://lotzremodeling.com/commercial-office-remodeling/

Is there any code that will let me put images across for the desktop and then neatly stack on mobile?

– Becky

[Bill Robbins]

Becky,

It sounds like you’re wanting to make the images say half width on larger displays and full width on smaller ones. Is that correct?

One way you could do that would be to add a div around your images with a specific class. Let’s use this for example:

(See the support site for example code).

Then you could add a bit of CSS like this to change the sizes based on screen width:

.responsive-group {
	clear: both;
}

.responsive-group img {
	width: 100%;
	margin-bottom: 30px;
}

@media only screen and (min-width: 768px) {

	.responsive-group img {
		width: 48%;
		margin-right: 2%;
		float: left;
	}

}

See how that turns out,
Bill

[Rebecca Morency]

I double checked that I set it up right from the support link, but it shrunk and merged them on the desktop (perhaps because there’s a caption). I basically wanted them side-by-side (multiple rows when necessary) on the desktop at the current size and then on the mobile they’d stack vertically and could be scrolled through. I tried a div with padding and that made things look wonky on mobile.

[Bill Robbins]

I can help, though I’ll need you to set it up with the code I provided. That way we can adjust it. Let me know when you have it back to that and we can go from there. Skip on the captions or add them into the images directly. Or make the images full size and don’t worry about rows.

[Author]

Posts