Jump to content


Photo
- - - - -

Space between videos


  • Please log in to reply
4 replies to this topic

#1 maK

maK

    Member

  • Members
  • PipPip
  • 40 posts
  • LocationBrazil

Posted 29 September 2016 - 04:58 PM

Hello, does anyone know how to approach the videos and leave more space for the ad on the right?

 

 

jaVJvGg.png


Edited by maK, 29 September 2016 - 04:59 PM.

logo2.png


#2 dargre

dargre

    Senior Member

  • Members
  • PipPipPipPipPip
  • 991 posts

Posted 30 September 2016 - 12:07 PM

This is responsive layout, where part of being watched and part of ads is divided into 2 columns: 75% and 25%. Changing spacing between thumbs won't change ads container, it will only enlarge thumbs. Columns definition is contained in bootstrap css stylesheet.

However bootstrap columns sizes are not static values, this will be always percentage value of browser's window width. There are also media css rules that may limit view of columns or reassign other column style.

Don't try to set static values for columns as this will break site responsivity, will end with bad look on mobile devices.

 

Unfortunately this is not something that can be taught in one post, requires css experience that usually you get during long years of experiments.


Edited by dargre, 30 September 2016 - 12:08 PM.

VIDEO.JS - best HTML5 player in the world for AVS script

NUEVOPLAYER 8 - best flash+html5 player for video scripts
Mods, custom code by NuevoLab (Search Suggest, Multiple image upload, Seo mods,and much more)


#3 maK

maK

    Member

  • Members
  • PipPip
  • 40 posts
  • LocationBrazil

Posted 30 September 2016 - 02:03 PM

Understand, it is possible to set "70% VIDEOS" and "ADS 30%"?


logo2.png


#4 dargre

dargre

    Senior Member

  • Members
  • PipPipPipPipPip
  • 991 posts

Posted 01 October 2016 - 03:20 PM

This is really difficult to explain what avs css is, how multiple css rules declaration work in conjuction with media rules. I can only explain how to change columns size for one of existing sizing rules.

In file 'index.tpl" of your template being watched videos are inside a div with class:

<div class="col-md-9 col-sm-8">

Then right ads colum is inside a div with class:

<div class="col-md-3 col-sm-4">

"col-md-9 col-sm-8"  for being watched means 75% row when browser wider than 992px, and 66.6667% when browser width smaller but wider than 768px. If it's less than 768px - the column becomes 100% wide.

 

"col-md-3 col-sm-4" for ads means 25% row when browser wider than 992px, and 33.3333% when browser width smaller but wider than 768px. If it's less than 768px - the column becomes 100% wide.

 

There is no 70% or 30% columns. But there are 66.6667% and 33.3333%.

 

So to have wider ads column (33.3333%)  you might try to change:

<div class="col-md-9 col-sm-8">

to

<div class="col-md-8 col-sm-8">

And

<div class="col-md-3 col-sm-4">

to

<div class="col-md-4 col-sm-4">

This concerns only file "index.tpl" (homepage). Ads container will be wider, but video thumbs smaller.

But this doesn't mean that ads column will be enough wide as you exactly need. This is percentage value. It will be 33.3333% of the browser width.

 

Ad from some ad company is usually static width so it may happen that it's wider than container you put ad inside, even if you increase width for ads column. In such scenario ad may break layout responsivity. Therefore it is suggested to hide a part of ad box if it's too wide. There is ".ad-body" style for ad box in css file. Style code is:


.ad-body {
    padding: 9px !important;
    text-align: center;
    vertical-align: middle;
}
To hide part of ad when it's too wide and breaks layout, you need to add one more rule:

.ad-body {
    padding: 9px !important;
    text-align: center;
    vertical-align: middle;
    overflow:hidden;
}

 

I know it's bit complicated for people not familiar with css and html but unfortunately rhere is no other easy way to explain it. Even if what I described above is really limited and very basic explanation.

 

 

 

 

 

 


VIDEO.JS - best HTML5 player in the world for AVS script

NUEVOPLAYER 8 - best flash+html5 player for video scripts
Mods, custom code by NuevoLab (Search Suggest, Multiple image upload, Seo mods,and much more)


#5 maK

maK

    Member

  • Members
  • PipPip
  • 40 posts
  • LocationBrazil

Posted 03 October 2016 - 10:01 PM

As you said.
 
It is really very complicated but it worked for me this new configuration.
 
My problem was really the "ADS 300x250" that was breaking the layout, now they are inside the DIV and if the screen is smaller it does not escape over the limit.
 
Is there any way to force these static ADS to be responsive without it being necessary to change the main code of the ads?

logo2.png