Keyword

Website doubling height after publishing at custom module

  • Pablo Benitez
  • Pablo Benitez's Avatar Topic Author
  • Offline
  • New Member
More
11 years 6 months ago #53665 by Pablo Benitez
Please take a look at integralmente.com.uy/

I found the issue is in here:

<img id="avID_AVPlayerID_5aa27614_1741955989_jwplayer_controlbar_background" src="integralmente.com.uy/plugins/content/jw_allvideos/jw_allvideos/includes/js/mediaplayer/skins/bekle/controlbar/cap.png" style="position: absolute; height: 50px; left: 10px; z-index: 0; float: left; /* width: 380px; */">

Adding this solves : /* width: 380px; */

Which file should I be editing?

Please Log in or Create an account to join the conversation.

  • Yiota
  • Yiota's Avatar
  • Visitor
11 years 6 months ago #53666 by Yiota
I don't see any doubling height in the video's module. Maybe it is in a different page?

Also, there seems to be an issue with your left tabs block.

Please Log in or Create an account to join the conversation.

  • Pablo Benitez
  • Pablo Benitez's Avatar Topic Author
  • Offline
  • New Member
More
11 years 6 months ago #53667 by Pablo Benitez
Thanks but maybe I didn't explain myself correctly. Please see the attached image.
Attachments:

Please Log in or Create an account to join the conversation.

  • Yiota
  • Yiota's Avatar
  • Visitor
11 years 6 months ago #53668 by Yiota
The problem is in your template's css. You have this style declaration img {height:auto !important} which causes your issue. If you remove the !important part you will see that the issue will be solved.

Please Log in or Create an account to join the conversation.

  • Pablo Benitez
  • Pablo Benitez's Avatar Topic Author
  • Offline
  • New Member
More
11 years 6 months ago #53669 by Pablo Benitez

The problem is in your template's css. You have this style declaration img {height:auto !important} which causes your issue. If you remove the !important part you will see that the issue will be solved.


I can't find this rule in any of my css files. Also, if I unpublish the module the problem dissapear.

Please Log in or Create an account to join the conversation.

  • Yiota
  • Yiota's Avatar
  • Visitor
11 years 6 months ago #53670 by Yiota
The CSS is embedded in your page's header. You could see the statement in your page source.
Try adding this in your template's css file

.avPlayerWrapper .avPlayerContainer .avPlayerBlock img {height:100% !important;}

Please Log in or Create an account to join the conversation.

  • Pablo Benitez
  • Pablo Benitez's Avatar Topic Author
  • Offline
  • New Member
More
11 years 6 months ago #53671 by Pablo Benitez
Ok, that sounds like something Allvideos plugin adds and not my template.  :'(

Please Log in or Create an account to join the conversation.

  • Pablo Benitez
  • Pablo Benitez's Avatar Topic Author
  • Offline
  • New Member
More
11 years 6 months ago #53672 by Pablo Benitez
In another thread I found that those styles are at plugins>content>jwallvideos
I will be taking at look there. Thanks!

Please Log in or Create an account to join the conversation.

  • Yiota
  • Yiota's Avatar
  • Visitor
11 years 6 months ago #53673 by Yiota
If you check on your page source you will see that this definitely doesn't come from AllVideos plugin but from another extension you are using to add responsiveness to your site.

This is the part I see loading in your page's header:
<!-- Css and js addons for vertex features -->	
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald" />
<style type="text/css"> 
#s5_component_wrap {
font-size:1.1em !important;
}

/* MAX IMAGE WIDTH */
img {
height:auto !important;
max-width:100% !important;
-webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box !important;    /* Firefox, other Gecko */
box-sizing: border-box !important;         /* Opera/IE 8+ */
}

.full_width {
width:100% !important;
-webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box !important;    /* Firefox, other Gecko */
box-sizing: border-box !important;         /* Opera/IE 8+ */
}

.S5_submenu_itemTablet{
background:none !important;
}

#s5_right_wrap, #s5_left_wrap, #s5_right_inset_wrap, #s5_left_inset_wrap, #s5_right_top_wrap, #s5_left_top_wrap, #s5_right_bottom_wrap, #s5_left_bottom_wrap {
width:100% !important;
}
#s5_right_column_wrap {
width:0% !important;
margin-left:-0% !important;
}
#s5_left_column_wrap {
width:0% !important;
}
#s5_center_column_wrap_inner {
margin-right:0% !important;
margin-left:0% !important;
}

#s5_responsive_modile_drop_down_wrap input {
width:96% !important;
}
#s5_responsive_mobile_drop_down_search input {
width:100% !important;
}

@media screen and (max-width: 750px){
	body {
	height:100% !important;
	position:relative !important;
	padding-bottom:48px !important;
	}
}

@media screen and (max-width: 970px){
	#subMenusContainer .S5_subtext {
	width:85%;
	}
}
	#s5_responsive_mobile_bottom_bar, #s5_responsive_mobile_top_bar {
	background:#0B0B0B;
	background: -moz-linear-gradient(top, #272727 0%, #0B0B0B 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#272727), color-stop(100%,#0B0B0B)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #272727 0%,#0B0B0B 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #272727 0%,#0B0B0B 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #272727 0%,#0B0B0B 100%); /* IE10+ */
	background: linear-gradient(top, #272727 0%,#0B0B0B 100%); /* W3C */
			font-family: Oswald !important;
	}
	
.s5_responsive_mobile_drop_down_inner, .s5_responsive_mobile_drop_down_inner input, .s5_responsive_mobile_drop_down_inner button, .s5_responsive_mobile_drop_down_inner .button, #s5_responsive_mobile_drop_down_search .validate {
	font-family: Oswald !important;
	}
	
.s5_responsive_mobile_drop_down_inner button:hover, .s5_responsive_mobile_drop_down_inner .button:hover {
	background:#0B0B0B !important;
	}
	
#s5_responsive_mobile_drop_down_menu, #s5_responsive_mobile_drop_down_menu a, #s5_responsive_mobile_drop_down_login a {
	font-family: Oswald !important;
	color:#FFFFFF !important;
	}
	
#s5_responsive_mobile_bar_active, #s5_responsive_mobile_drop_down_menu .current a, .s5_responsive_mobile_drop_down_inner .s5_mod_h3, .s5_responsive_mobile_drop_down_inner .s5_h3_first {
	color:#BBBABA !important;
	}
	
.s5_responsive_mobile_drop_down_inner button, .s5_responsive_mobile_drop_down_inner .button {
	background:#BBBABA !important;
	}
	
#s5_responsive_mobile_drop_down_menu .active ul li, #s5_responsive_mobile_drop_down_menu .current ul li a, #s5_responsive_switch_mobile a, #s5_responsive_switch_desktop a, #s5_responsive_modile_drop_down_wrap {
	color:#FFFFFF !important;
	}
	
#s5_responsive_mobile_toggle_click_menu span {
	border-right:solid 1px #272727;
	}
#s5_responsive_mobile_toggle_click_menu {
	border-right:solid 1px #0B0B0B;
	}

#s5_responsive_mobile_toggle_click_search span, #s5_responsive_mobile_toggle_click_register span, #s5_responsive_mobile_toggle_click_login span, #s5_responsive_mobile_scroll a {
	border-left:solid 1px #272727;
	}

#s5_responsive_mobile_toggle_click_search, #s5_responsive_mobile_toggle_click_register, #s5_responsive_mobile_toggle_click_login, #s5_responsive_mobile_scroll {
	border-left:solid 1px #0B0B0B;
	}

.s5_responsive_mobile_open, .s5_responsive_mobile_closed:hover, #s5_responsive_mobile_scroll:hover {
	background:#272727;
	}

#s5_responsive_mobile_drop_down_menu .s5_responsive_mobile_drop_down_inner, #s5_responsive_mobile_drop_down_register .s5_responsive_mobile_drop_down_inner, #s5_responsive_mobile_drop_down_login .s5_responsive_mobile_drop_down_inner, #s5_responsive_mobile_drop_down_search .s5_responsive_mobile_drop_down_inner {
	background:#272727;
	}

	.s5_wrap {
	max-width:1250px !important;
	}
	
	@media screen and (max-width: 850px){
	
		#s5_right_wrap, #s5_left_wrap, #s5_right_inset_wrap, #s5_left_inset_wrap, #s5_right_top_wrap, #s5_left_top_wrap, #s5_right_bottom_wrap, #s5_left_bottom_wrap {
		width:100% !important;
		}
		#s5_right_column_wrap {
		width:0% !important;
		margin-left:-0% !important;
		}
		#s5_left_column_wrap {
		width:0% !important;
		}
		#s5_center_column_wrap_inner {
		margin-left:0% !important;
		margin-right:0% !important;
		}
	
	}

		@media screen and (min-width:580px) and (max-width: 850px){
		
						
			#s5_top_row1 #s5_pos_top_row1_1.s5_float_left {
			float:left !important;
			width:100% !important;
			}
			
			#s5_top_row1 #s5_pos_top_row1_2.s5_float_left, #s5_top_row1 #s5_pos_top_row1_3.s5_float_left, #s5_top_row1 #s5_pos_top_row1_4.s5_float_left, #s5_top_row1 #s5_pos_top_row1_5.s5_float_left, #s5_top_row1 #s5_pos_top_row1_6.s5_float_left {
			float:left !important;
			width:50% !important;
			}

		}
		

		@media screen and (min-width:580px) and (max-width: 1100px){
		
					
			#s5_top_row2 #s5_pos_top_row2_1.s5_float_left, #s5_top_row2 #s5_pos_top_row2_2.s5_float_left {
			float:left !important;
			width:50% !important;
			}
			
			#s5_top_row2 #s5_pos_top_row2_3.s5_float_left, #s5_top_row2 #s5_pos_top_row2_4.s5_float_left, #s5_top_row2 #s5_pos_top_row2_5.s5_float_left, #s5_top_row2 #s5_pos_top_row2_6.s5_float_left {
			float:left !important;
			width:100% !important;
			}

		}
		@media screen and (min-width:580px) and (max-width: 850px){
		
					
			#s5_bottom_row3 #s5_pos_bottom_row3_1.s5_float_left, #s5_bottom_row3 #s5_pos_bottom_row3_2.s5_float_left, #s5_bottom_row3 #s5_pos_bottom_row3_3.s5_float_left {
			float:left !important;
			width:33.3% !important;
			}
			
			#s5_bottom_row3 #s5_pos_bottom_row3_4.s5_float_left, #s5_bottom_row3 #s5_pos_bottom_row3_5.s5_float_left, #s5_bottom_row3 #s5_pos_bottom_row3_6.s5_float_left {
			float:left !important;
			width:50% !important;
			}

		}
		
</style>

Just try adding the css style I sent you above and check out if it works.

Please Log in or Create an account to join the conversation.

  • Pablo Benitez
  • Pablo Benitez's Avatar Topic Author
  • Offline
  • New Member
More
11 years 6 months ago #53674 by Pablo Benitez

The CSS is embedded in your page's header. You could see the statement in your page source.
Try adding this in your template's css file

.avPlayerWrapper .avPlayerContainer .avPlayerBlock img {height:100% !important;}


Oh! Great, I didn't saw the solution at first. Will try.

Please Log in or Create an account to join the conversation.

  • Pablo Benitez
  • Pablo Benitez's Avatar Topic Author
  • Offline
  • New Member
More
11 years 6 months ago #53675 by Pablo Benitez
Perfect! It's fixed now! Thanks!!!  :D

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum