Media Placement options in The Untitled Theme

  • Unknown's avatar
    bslaroc · Member ·

    Hello everyone, I am trying to arrange media elements side by side on my website pages including the Home, and others under the parent page Portfolio. Each time I add a media element the default arrangement appears to be one under the other and I would much rather they are set up side by side and/or at least have the option? I’ve tried setting up the embed coding side by side in the customizer but it still appears one under the other.

    The blog I need help with is: (visible only to logged in users)

  • kathrynwp · Staff ·

    You might be trying to place block-level elements side-by-side, in which case you’d need to try to override that block display to make them inline elements instead. You can learn more about the different types of display here:
    http://learnlayout.com/display.html

    Could you provide a link to a specific post or page where you’re having trouble placing elements side-by-side so we can have a look directly? Thanks.

  • Unknown's avatar
    bslaroc · Member ·

    Thanks for the informational link. One page in particular there I would like the videos to appear inline is https://missingbuttonentertainment1.wordpress.com/portfolio-2/video/.

    Thanks again.

  • kathrynwp · Staff ·

    Try putting your videos inside some column divs:

    <div style="width:45%;float:left;">

[wpvideo jfduhSte w=400]

[wpvideo Xn5d61Ls w=400]

</div>
<div style="width:45%;float:right;">

[wpvideo m2xlVivw w=400]

</div>

    Alternatively, you can create some reusable classes. So in that case, this would be your HTML:

    <div class="col-left">

[wpvideo jfduhSte w=400]

[wpvideo Xn5d61Ls w=400]

</div>
<div class="col-right">

[wpvideo m2xlVivw w=400]

</div>

    And you’d add this to your custom CSS:

    .col-left {
  width: 45%;
  float: left;
}

.col-right {
  width: 45%;
  float: right;
}

    I tested both and they seem to do the trick. Let me know how it goes.

  • Unknown's avatar
    bslaroc · Member ·

    They do make the adjustments into two columns which is great thanks! Is there a way to maximize the column space allotted for the videos/images within these pages that exist under my parent Portfolio page? For instance is there a way to get 3 to 4+ videos in one row across? I’m just asking because as I develop more and more work the more I can arrange inline the less space from top to bottom it will take up on the page. Thanks again really.

  • supernovia · Staff ·

    You could use something like this to get 4 across, but the videos start to get tiny. I’m including the part that makes this only apply on wider screens since this would look bad on a small screen:

    @media screen and (min-width: 966px) {
.entry-content iframe {
	width: 24%;
	height: auto;
	float: left;
	margin-right: 1%;
}
}

    If you wanted to make them 3 across or 5 across, or if you want this to work on some narrower screens, please adjust the numbers accordingly. Just know that the total needs to be 100%, including any margins (remember the margin must be multiplied by the number of videos you have).

    I’m moving this topic to the CSS forum as well.

  • Unknown's avatar
    bslaroc · Member ·

    Does the @media screen info you typed above belong on the custom CSS customization section or on the HTML of the individual page?

  • supernovia · Staff ·

    All of that is CSS. Cheers!

  • The topic ‘Media Placement options in The Untitled Theme’ is closed to new replies.