default theme

[corrado]

Hello
i have the default team enabled and have some view problems on smaller devices
for some reason as soon as i have a banner in place it shows on places we don't want




i have tried to remove the banners and than its ok but whit banner in place it shows like this
i hope some one of u can help me

site: http://server-ogame.com/

 

[Mark]

Your video tag has a fixed width of 728px, this should likely be set to 100% width instead.

I must admit I have no experience with these new mpeg banners but I would suspect on mobile devices you may want to hide all of the user banners to save your visitors bandwidth.

You could surround the entire banner with this (to hide on extra small screens):
<div class="d-none d-sm-block">

</div>

Like so:

<div class="d-none d-sm-block">
    <a href="{$url}" onclick="out(this,'{$username}');" rel="nofollow">{$banner}</a><br>
    </div>

Full documentation on hiding elements on specific devices can be found here: https://getbootstrap.com/docs/4.0/utilities/display/

Does that help? I do think Basti had a fix for this to auto resize the banners, if so it will be included in version 1.9

 

[Basti]

Fluid videos are a very very special, and annoying case. And i believe the default theme misses the old fluid video css
for now, add this to your css file

.video-fluid {
    max-width: 100%;
}

open your banner_mp4.html and make sure it has the following applied directly on the video tag

class="video-fluid"

following quote is part of upgrade docs we will include for 1.9
you cant do this yet with 1.8, so this is just for reference, explanation of the issues when facing fluid videos

This fixes an issue where the fluid videos are not really fluid. While the visible video scales down, the video box, remains static height, e.g 60px, causing lots of white space above/below mp4
If this does not bother you, feel free to skip all this, but it is recommended to get a correct display, especially for the mp4 banners

We cant simply use height: auto; because videos have a default height of 150px, causing really bad layout shifts ( bad seo for 2021 )

So, lets get to the magic, what does this css do? In short,
- It ensures cross browser compability, by reverting to the old behavour if custom css properties are not supposted ( cough, IE )
- toplist owner mistakes by applying wrong html markup
- Not adding more dom deepth like older variable aspect ratio boxes ( 2 less child nodes for each banner to be exact )
- object-fit: fill; This is pureley for people using lazy load libraries with placeholder images which are smaller than a member banner, thus stretching the placeholder. And since videos default behavour is to contain possible poster/placeholder this makes sure it has same dimension as the video itself

Open your css file in use and find this

.video-fluid {
    max-width: 100%;
}

Replace that block with the following

/* Fluid video/img */
.video-fluid,
.site-image-container video:not(.video-fluid) {
  max-width: 100%;
}
.img-fluid,
.site-image-container img:not(.img-fluid) {
  height: auto;
}
@supports (--custom:property) {
 
    .site-image-container {
        position: relative;
        display: block;
        max-width: var(--site-image-aspect-base);
    }
    .site-image-container::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--site-image-aspect-ratio)));
    }
    .site-image-container img,
    .site-image-container video {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        object-fit: fill;
    }
}

 

[corrado]

Thank you have made the chances you suggested