Widgets to same size

• 

  estudiomatccorp · Member · Mar 14, 2017 at 9:51 am

  • Copy link
  • Add topic to favorites

  Hi,
  I would like to put the video and the image to same size.
  Enlarge the widget of video or make the widget of image smaller
  That these remain at the same height

  Widget area of ​​the first main page

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 14, 2017 at 7:56 pm

  • Copy link

  Hi there, the following is about as close as we can get since on the slideshow on the right, some of the size settings cannot be changed. Replace the Media Query you have not in your custom CSS with this and see what you think.

  @media screen and (min-width: 768px) {
  	.home #secondary #widget-area-5 {
  		width:50% !important
  	}
  	.home #secondary #widget-area-6 {
  		width: 40%;
  	}
  	#secondary #widget-area-6 {
  		margin-right:0;
  		float:right
  	}
  	#secondary #widget-area-5 {
  		margin-right:0;
  		float:left
  	}
  	#secondary #widget-area-7 {
  		margin-left:15%;
  		width:70%;
  		text-align:center
  	}
  }

• 

  estudiomatccorp · Member · Mar 14, 2017 at 9:42 pm

  • Copy link

  hola,
  The video continues to be longer than the image.
  Some way to correct it?
  could bevel the widget of video as the image
  Thanks

• 

  thesacredpath · Member · Mar 14, 2017 at 10:22 pm

  • Copy link

  In the code I gave, you may have to play with the widths that I have given, and at some window/screen widths, there may still be some differences. In the .home #secondary #widget-area-6, change the width to 38.5%.

  With two different element such as what you have (video and a slideshow) it is very difficult to get them to always be the same height on all screens because they are controlled by two different sections of software. The video is from Youtube, so they are in control of the video sizing and resizing for different windows/screen sizes, and the slideshow is controlled by our Jetpack software.

• 

  thesacredpath · Member · Mar 14, 2017 at 10:35 pm

  • Copy link

  In the code I gave, you may have to play with the widths that I have given, and at some window/screen widths, there may still be some differences. In the .home #secondary #widget-area-6, change the width to 38.5%.

  With two different element such as what you have (video and a slideshow) it is very difficult to get them to always be the same height on all screens because they are controlled by two different sections of software. The video is from Youtube, so they are in control of the video sizing and resizing for different windows/screen sizes, and the slideshow is controlled by our Jetpack software.

  We cannot change much about the Youtube video code since we aren’t in control of it, and with the Jetpack code for the slideshows, we can change a few things about it, but due to the fact that the code has to work properly in all themes, there are restrictions on what we can do with it.

  Trying to get the two to always be the same height is kind of like chasing the wind.

  You can replace what you have with this, but again, it only works for a small range of widths. I’ve added a like border to the video with this code also.

  @media screen and (min-width: 768px) {
  	.home #secondary #widget-area-5 {
  		width:47% !important
  	}
  	.home #secondary #widget-area-6 {
  		width:41.5%
  	}
  	#secondary #widget-area-6 {
  		margin-right:0;
  		float:right
  	}
  	#secondary #widget-area-5 {
  		margin-right:0;
  		float:left
  	}
  	#secondary #widget-area-7 {
  		margin-left:15%;
  		width:70%;
  		text-align:center
  	}
  }
  #text-13 .textwidget {
  	border: 20px solid #222;
  	border-radius: 10px;
  	background-color: #222;
  }
  .jetpack-video-wrapper {
  	margin-bottom: 0 !important;
  }