You can either change the size of one streaming widget or all the Streaming widgets at once.


1. How can we change the size of the boxes under each of the streaming widgets on the home page. 


1. If you only want to modify the size of the "Streaming-Photos" widget, you need to navigate to Toolbox >> Widget Manager >> Streaming-Photos >> Edit.



2. Then locate the "Widget Code" and on line 14 add the id="streaming_photos", then click on "Save changes".

 

It should look like this: 


<table id="streaming_photos" class="post_resultsG">   


***NOTE: You need to add this code only if you want to have this change in one specific widget and not in all of them.



3. Go back to your Homepage and right click on one of the images and the select the option: "Inspect Element".




4. Then you'll see some code at the bottom of the page. In the left side please click on the ID: streaming_photos (left arrow in the image below). 



5. Then in the right side you'll find the CSS Code. 

You need to modify the width.  A little trick is to click on the numerical value (ie. 182px as shown above), and then using the up and down arrow keys to adjust the widget as you please. Here is a quick example on how to inspect an element and edit the width (please note this example does not have a class ID):





6. The changes will be reflected on your page however if you refresh your homepage the changes will disappear, so you need to copy the code and paste it in a Notepad. 


For example:  

If you change the width you need to add this code:


.module.posts .post_resultsG {

  width: 151px;

}


7. When you have the right code go to the widget "Streaming Photos", find the "Widget CSS" title and paste the code.  



8. Click on "Save Changes" and refresh the Homepage.


2. How can we just change the size of the images in each of the boxes in the streaming widgets on home page. Streaming photo widget?


To change the size of the images you need to do the same steps as above. 


This is the code that you will be required to edit to change the size of the Photos:


.post_resultsG .image {

  margin-left: 30px;

  max-width: 80%;

}


.post_resultsG .image span img {

  min-height: 100px;

  height: 129px;

}


You can modify the size of the width, height, min-height, add a margin-left, margin-right, etc.


Make sure that the min-height is less than the height, if not the changes won't be reflected.