We installed video news demo without content, however, the top band of dark background didn’t show up on the featured blocks in the home page. We tried changing the background color of row css in the td composer that didn’t work. Any inline CSS or other files/configs to be changed as well ? Please advise how to get the dark backgound on the top of home page as we see in the post pages.
Hi,
If you installed the demo without content, the demo homepage will not be provided. The design is imported, but it will only apply for the elements used to build the demo page.
Let’s take the top section of the demo you mention, the big grid and stretched row. The row contains a class set when the demo was built
– https://www.screencast.com/t/XYH6G0vnkxU
With class – https://www.screencast.com/t/eJrVjd9C
Without class – https://www.screencast.com/t/sl1J9PxBl
So you are missing the class “import_video_slider_bg”.
Of course this simple effect would be perfectly achievable in the CSS tab of the row, without the class, like this
– https://www.screencast.com/t/iPKionOiU9X4
This is exactly what the class does. Sets a negative margin top of “-48” and a padding top of “48”.
Despite installing the demo with no content and the homepage not being provided, you can copy the demo page content from the theme files and see how the page is built
– https://forum.tagdiv.com/topic/wish-about-the-demo/
Let me know if you have more questions.
Thanks
That is how the header ad is displayed with that header style, there is a small margin to make it look better probably.
If you want to remove that margin and also set a background for it, you will have to use some CSS. Something like this should work
– https://www.screencast.com/t/hedcRU5kRwf
@media (min-width: 1019px) {
.td-header-style-5 .td-header-sp-recs {
margin: 0 auto 0!important;
background-color: #222;
}}
The footer image seems to display properly for me, the image is of this size
– https://www.screencast.com/t/DW4VTCTWblfo
It has a transparent lower part, so it would appear bigger. The image is displayed as it is, there is no unnecessary space added there.
Thanks
On mobile it should look like this – https://www.screencast.com/t/sarTinxoX6
If you want no margin top for all devices this would be the code in addition to the previous one
– https://www.screencast.com/t/acOKLUFZi5Z
@media (max-width: 1018px) and (min-width: 768px) {
.td-header-style-5 .td-header-sp-recs {
margin: 0 auto 0 auto !important;
}}
@media (max-width: 767px) {
.td-header-sp-recs img {
margin: 0 auto;
}}
Seems to work on my end, the ad image is not loading for me when viewing your website
– https://www.screencast.com/t/H26cMXTDUxv
So I can’t inspect the actual ad, or how it looks loaded. The error suggest that the image is forbidden
– https://www.screencast.com/t/qOsmYppVQEFM
For me the code removes the top margin of the header ad, I tested it again.
Did you try to access the site through a smartphone browser instead of a dev tool/simulator ? Not sure why wouldn’t the image load specifically for you.
We tested the site through multiple ios and android devices, everything gets loaded, though with formatting issues. Check out the screenshot of iphone – chrome here
https://monosnap.com/file/uajoL02Uv5vhVKt4anznENrI03bKCj
Is there an email where we can send you adcode and other details. We can even create a test login for you to check out other settings.
Tried on a few computers here, Chrome and Firefox, the ad image is not loading
– https://www.screencast.com/t/I8X8PtEL
Same on mobile Chrome – https://www.screencast.com/t/kA7laupFY
Server denies access to the image it seems (403 error).
That is why I tested with the same header style and a header ad, and created that code. The code works on my end, I see it works on your end as well and removes the space between header and ad
– https://www.screencast.com/t/97fklmjJQot
I thought that is what you wanted to do. If I misunderstood please correct me.