Video size in desktop

Support Area Forums Foxy Video size in desktop

This topic contains 5 replies, has 2 voices, and was last updated by  Bill Robbins 2 years, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question: http://lotzremodeling.com
  • Author
    Posts
  • #31772

    Rebecca Morency
    Participant

    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

    #31773

    Bill Robbins
    Moderator

    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

    #31781

    Rebecca Morency
    Participant

    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

    #31782

    Bill Robbins
    Moderator

    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

    #31799

    Rebecca Morency
    Participant

    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.

    #31803

    Bill Robbins
    Moderator

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Video size in desktop’ is closed to new replies.