CSS help: video beside image gallery?

  • vivanovart · Member ·

    Hello!

    I am trying to arrange the appearance of a video and a gallery on my main page. I would like the video to appear on the left hand side of the page and the image gallery to be displayed along side it, on the right. Would anyone be able to help me put this into code? I am trying to accomplish this in the CSS editor, but haven’t had any luck.

    My main objective is to improve the user interface by eliminating the long scrolling downwards and showing my most important content displayed altogether on the screen as soon as the webpage opens.
    I think that in order to do this, I have to make the page wider, so that more content can fit horizontally. Is this right? How do I do this?

    I would really appreciate your help! Thank you very much!

    Note: I am using the Shine On theme. I tried accomplishing this with widgets and other themes, but didn’t get any good results.

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

  • hallluke · Member ·

    While it is possible to make your content area larger to have the video and images take up less space vertically it might be a better idea to make use of some of the built in features that come with WordPress like image galleries, you can even have them display as a slideshow, or have the thumbnails click through to a full sized carousel view. Try those options out first and let me know if you still want to go down the CSS route instead.

  • vivanovart · Member ·

    Hi hallluke! Thank you for the quick reply! I actually have tried those options. The images that you see on my front page are actually a “thumbnail grid” gallery. It just doesn’t look like a regular thumbnail gallery because under Settings > Media > Thumbnail Size, I have them set to be 1000 pixels. I did this because I previously wanted to show these images in full size while also taking advantage of the slideshow option, if one is to be selected individually. That worked wonderfully but now I am trying to accomplish a more compact look.

    So, if I can still use a gallery to do this, that would be great! However, I am not sure how to place the gallery to the right of my video, which is what I am trying to do now. Do you know how I might do this?

  • vivanovart · Member ·

    I made an image of what I would like it to look like. Hopefully that helps! https://www.dropbox.com/s/f0s578mmxkuy3uk/Example_DesiredLook.jpg?dl=0

  • nizamilputra · Member ·

    You should make .entry-content wider then change width of video container and thumbnail gallery container, then make them float left and right.

    I think you can make the images into thumbnail first, then I can give you the css code.

  • vivanovart · Member ·

    Hi nizamilputra! That’s exactly what I would like to do! Do you know how I would write this code?

    I changed my thumbnail images to a normal size now.

  • nizamilputra · Member ·

    Yes I saw the gallery now. Let’s work with css now. Here the first thing you should know about how to editing css.

    Because you use h2 (Animation Demo Reel & Visual Development & Illustration) we need to wrap each section (video and gallery) to make side by side. Open the “Text” tab (http://en.support.wordpress.com/editors/), maybe you will find the code like this;

    <h2 style="text-align:center;"><span style="color:#ff9900;"><strong>Animation Demo Reel</strong></span></h2>
[vimeo http://vimeo.com/96769979]

<h2 style="text-align:center;"><span style="color:#000000;"><strong><span style="color:#ff9900;">Visual Development & Illustration</span><br>
</strong></span></h2>
[gallery ids="2410,2409,2408,2407,2406,2378,2381,2382,2390,2392"]
<p style="text-align:center;">Thank you for stopping by to see my work!</p>

    FYI, it’s not actually same like yours. The point is you should wrap each section (they will be left and right). And it goes like this;

    <div class="section-left">
<h2 style="text-align:center;"><span style="color:#ff9900;"><strong>Animation Demo Reel</strong></span></h2>
[vimeo http://vimeo.com/96769979]
</div>

<div class="section-right">
<h2 style="text-align:center;"><span style="color:#000000;"><strong><span style="color:#ff9900;">Visual Development & Illustration</span><br>
</strong></span></h2>
[gallery ids="2410,2409,2408,2407,2406,2378,2381,2382,2390,2392"]
<p style="text-align:center;">Thank you for stopping by to see my work!</p>
</div>

<div style="clear: both"></div>

    Then add this css code;

    .entry-content{
max-width: 1200px;
}
.section-left{
width: 580px;
float: left;
}
.section-right{
float: right;
}

    I hope it will helps. Please let me know if you need another help.

  • vivanovart · Member ·

    It worked!!! I’m SO happy! I really can’t explain my gratitude. Thank you so much!

  • nizamilputra · Member ·

    Yeah, glad to hear that!

  • vivanovart · Member ·

    Actually, I’m sorry! I have one more question about this. Is it possible to specify that I only want these lines of code to apply to my main/home page and not anywhere else?

    Right now, if you go to my “Blog” page where all of my posts go, some of my galleries are aligning to the side, when I would like them to stay centered. Would you help me figure out how to write this code? My apologies for asking for so much – I am still very new to coding and the CSS language.

  • nizamilputra · Member ·

    Oops sorry, lets change the css on .entry-content, add .home selector before .entry-content;

    .home .entry-content{
   max-width: 1200px;
}
  • vivanovart · Member ·

    This looks absolutely fantastic!! Thanks so much again! I really appreciate it. All the best to you!

  • nizamilputra · Member ·

    Yay! :)

  • The topic ‘CSS help: video beside image gallery?’ is closed to new replies.