[Steve B]

We were hoping to have our featured area be:
main slider (50%) and then 2 link boxes (each 25%)
Underneath the slider and 2 link boxes we are using the into widget.

Seems like there would be ratio settings that would make it so the main slider and the link boxes were all the same height across. (so that it is nice and even all the way across the page) But I can’t find a combination that works. See our home page here:

http://tgg.wpstagecoach.com

Can we make that happen some how?

Also,
Is it possible to make those vertical spaces between the link boxes and the slider, the same as the horizontal space underneath the header and between the slider and intro widget?

Update: Also just noticed that it will need some adjustment on tablet (not phone). Can you make the format on tablet, the same as desktop.
So going across the page – main slider, 1st link box, 2nd link box (all same height)
Then underneath, the intro widget as it is.

Thank You!

[serkan]

Hi Steve,
Please check your custom CSS codes and update accordingly. The first code is available in your source code.

@media screen and (max-width: 991px) { .link-box { width: 50%; } }
@media screen and (min-width: 992px) { .post-wrap { padding-top: 116.5%; } }

Thanks

[Steve B]

Thank you Serkan!
I did some tweaking. I think I am learning (a little)

Here’s what I have now:

@media screen and (max-width: 767px) { .link-box { width: 50%; } }

@media screen and (max-width: 991px) and (min-width: 767px) { .slider-box { width: 50%; } }

@media screen and (min-width: 767px) { .post-wrap { padding-top: 117%; } }

.ratio-16-9 .post-wrap { padding-top: 56.25%; }

Everything looks good except a couple things:

1 – (on phone only) can we make the link boxes (“home gardening” & “outdoor rooms”) so the height is less – (16×9 ratio maybe) – I still have this code in (carried over from the 1st site that I did) >> .ratio-16-9 .post-wrap { padding-top: 56.25%; } and thought that might have fixed it but I don’t think it is doing anything!

2 – Would there be a way to make all the spacing the same? – see photo
http://tgg.wpstagecoach.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-26-at-3.44.03-PM.jpg

Thanks!

[serkan]

Hi, You can use the custom css code like this;

@media screen and (max-width: 767px) { .link-box .post-wrap { padding-top: 56.25%; } }

These white spaces are also controlled by JavaScript code outside css. Touching them may cause some technical problems in the future.

[Steve B]

ok thanks Sekan! Code works good!

[serkan]

You are welcome.