I want to keep this same grid on below page but have some full width which I have started and began to do which is starting to work out but ran into some issues…
The first box with the title in it the gold BG goes all the way to touch the picture I need same amount of white space in between as on Portfolio page but can’t seem to solve this
The bottom two sections need to fit within the grid, keep in mind using Wordpress so the top info (Title) and first picture is pulled in from featured image and title options in Wordpress everything below is using column plugins so if theres way to make these fit perfectly as you can see the lowest ones are not as wide and on last section the gold goes out believe this could be padding issue.
The padding/margin between everything after the first two items are off
Anything with class=“bgcolor” with the gold background need the gold background color to fill the whole height.
If you want equal column heights in pairs like that then you really need to use the display:table-cell approach for each row (instead of floats) unless you can set all elements height specifically - which would be bad. That’s the only easy way to get equal column heights.
To stop the gold touching the image on the first example you would need to nest an inner element and apply the color to that instead. The floats are 50% wide so you can’t have space between then unless you change their widths.
I’d re-do that section using display:table-row and display:table-cell for the paired items instead of floats and use border-spacing to get the gap between.
Thanks for that. How can I go about this as mentioned this is in Wordpress and am using a column based plugin for everything below the li on that page so crucial for me to make sure it lines up editing the CSS is not hard to do but need it to line up with and follow same grid as the portfolio page.
From layout I have now how it is coded in on the page what changes would I need to make to CSS to achieve this, I’ll start playing with it as well to see if I can make some of it work.
Just need to figure out how to do the equal height with the bg color I believe and it will need to lineup with the top of the item next to it.
There will be more text going in underneath the h3 Valhalla Inn it will be the categories near the bottom but first wanting to solve the equal column heights. Is there a way to do it without using table-cell because then it may mess up the previous page the portfolio page?
Once I put in that code the third item below is now gone. This page will continue to have more and more stuff in there so need more to show up not just the two and its using Wordpress so these are posts. So can’t really change the structure of the HTML
And it doesnt work on Firefox using the table-cell. The images are larger then should be.
Doesnt seem to work in Chrome either as now my single image the one that spans across two columns is not there either now. But getting closer. Also the second row of paired ones is shifted to left some and not lined up.
You can’t have 3 items all of 50% and expect them to fit across which is why I mentioned about using pairs of items.
If you can’t arrange the html in pairs then you can’t really use the table-cell approach. Even the floated method with the padding hack requires that you have rows so that you can hide the overflow on each row and if this can’t be achieved then you can’t really have your equal height columns unless you fix the height explicitly.
It seems as though you just have consecutive list elements (which you say can’t change in wordpress) which means that you can’t actually group them in pairs unless you can put two items in a list item or have uls with only two list items.
Unless you can change the html I don’t think what you want is possible (or I am misunderstanding your quest).
Sorry so what is the solution as this is a plugin to embed videos in Wordpress should I be editing the plugin or anything in CSS I can edit or add to resolve the issue?
The technique you are using is to use percentage padding on the parent element to create the width and height for an absolutely placed iframe so that the 16:9 ratio is maintained. vertical padding is based on the width of the element so the ration between with and height is always maintained. The iframe is then absolutely placed to fit in that space and thus maintains its aspect ratio when scaled with the window.
