Hi Simon,

Thanks for the reply. Unfortunately this has not solved it. Chrome with no extensions it isn’t working. Same with IE (old version – at work), or Firefox. Same result in all browsers, no extensions.

Worth noting that elements that aren’t very tall by default (such as the HTML RAW Code one) are not selectable. It just selects the entire column. Taller options (such as, Slide images for example), are. Not sure why this is.

This behavior only begun with 8.6 update.

Cheers,
Dave

Simion and Bogdan, you guys are fantastic. That last little bit has done the trick. It needs just a wee bit of tweaking but I think I can manage that myself, as you guys got the hard bits done. Thank you for putting up with my constant questioning. I’ll probably extend the service to 12 months rather than the default 6, as I’m impressed how much help we get, even though that’s a bit beyond what is meant to be done.

I’d suggest this sort of style as an additional post template in future updates. I’ve seen this style on a lot of sites and it does tend to look very impressive and modern.

Thanks for the help guys, much appreciated.

Got a little more time on my hands to explain it now, so here it goes.

Everything I will post is regarding the desktop (1141px+) view, and the code is in the Advanced CSS -> Desktop Box.

The code I’m using is as follows

.single_template_7 .td-backstretch{
transform: translate3d(-50%, -25%, 0px) scale(1.15, 1.15)!important;
}
.td-post-template-7 .td-post-header{
height:850px;
}

The image I am using is this one. The dimensions are 1920×1280

This is how the post displays on a full HD monitor (1884 width image) It looks absolutely beautiful (IMO) – Preview

If you resize the browser to emulate smaller series, a black bar begins to appear at the bottom as the image is resized dynamically. Due to the new 850px height, the image no longer covers the required area. – Preview (Note the black bar at the bottom)

As I continue to resize the browser, the black bar enlarges as the image gets smaller and eventually begins to look quite bad. Preview

As you can see, it’s still cutting off quite a large amount of the image at the top, despite the black bar appearing at the bottom. Is there a way to…’pin’ the bottom of the image, to the bottom of the header image display area, so it’ll stop creating a black bar? I can move the image down, but then it starts to cut off the bottom of the image more…and motorsport is a pain in that the car is always at the bottom. So being able to pin the bottom of the image to the bottom of the header area would solve it.

Because the mobile devices have a relatively narrow window width they operate in, it doesn’t really cause a problem in those views and I can manage it. It’s the fact that desktops have to range from 1140 up to 1920 that’s causing an issue.

Hope this explains things a bit better!

• This reply was modified 8 years by ds.ellis.

Hi Simion,

It’s actually something that happens on desktop only (width greater than 1141px). As you adjust the browser window down from 1920px, the image is dynamically resized to suit the new browser window. The header is still 1000px tall, but because the image is being resized, it eventually becomes too small to fill the entire header and is replaced by plain black.

You’re right that putting the code into the Desktop section fixes the mobile devices, but the desktop section still displays black at the bottom, because the image is now slightly higher than it used to be (the -40% from the original code is now -20%).

One way of fixing it is to use the first bit of code and move the image down, but as I said, motorsport photography tends to be done with the car at the bottom, so I’m losing the car in the majority of shots. It’d be ideal if the image did not resize with the window in the Desktop view at all, and which would mean I could ‘pin’ the image from the bottom, rather than top. 🙂

I might be REALLY bad at explaining things, lol.

Cheers guys.

• This reply was modified 8 years by ds.ellis.

Hi Bogdan,

Thanks brilliant, thank you very much! It looks lovely 🙂

One more (hopefully the last one in this thread!). Is there a way to stop the Featured Image in Post Template 7 from re-sizing when you change the window size? The site looks spectacular when the browser is maximised, but when you size down slightly (including mobile), it resizes the photo slightly, creating a black bar. Example image here. It stops at a certain point, which suggests there is a way to stop it resizing but I can’t be sure.

Sorry for all the bother, and thanks again for all the help 🙂

I’ve one more question, hopefully this is just as easy for you knowledgeable guys!

Is it possible to extend the bottom of the Featured Image in Post Style 7? It looks brilliant, but it’d be nice if it could have a ‘full screen’ option.

For example, my post currently looks like this. Would it be possible to drag the bottom of it down to get an effect like The Verge has created here?

If not, I highly suggest this as an option for future updates. It’s a great design idea. 🙂

You guys are fantastic, that’s perfect. Thanks! 🙂

The way I fixed it was as follows –

Create a temporary test page (do NOT use a page you are planning on using at some point in the future).

Go into the page with tagdiv composer. Place a couple of elements, including the broken “Text with title” element. Save the page and return to the wordpress backend.

Now load the page in the old Visual Composer and make edit the “Text with title” element in there. Save the page. It might break the page doing this because they aren’t compatible. Now load the page again in the tagdiv composer, and the Text with Title element should now work properly.

That’s how I did it, and all the information I know. I did email it back to the staff to see if it helped. It’s like using Visual Composer somehow reset it, which doesn’t make much sense but now it works for me.

Thanks for the reply.

I tried turning every plugin off except for tagDiv Composer and tagDiv social counter, no luck.

I shall create an admin account and make contact,

Thanks.
Dave

Oh, and when I’m on the dashboard, if I hover over my homepage/site name in the top left, it gives me the drop down with the options for “Visit Site” and “Theme Panel”. Theme Panel is in bright red text…it feels like it’s trying to tell me something? I don’t know if that’s useful information or not.

This was my fault. I whitelisted my own site, but the adblocker did not whitelist it correctly. Thanks for the help.