What is the optimal size for images when using the Service Block (Effect) element? The image size doesn’t seem to scale correctly when the browser window size is changed. Visit onsight.crystalcreekconsulting.com for a sample.
Thanks for your quick response. You’ll need to view the page on a computer instead of a phone so you’re able to resize the browser window to see the behavior. If you change the horizontal size of the browser window, you’ll see that the vertical size of the bounding frame is not changing with the image. You can sort of see this in the difference between your two screen shots. Note the difference in the vertical size of the light gray strip between the image and the title. I would like to optimize the image size so this strip does not appear.
The screenshots i send you were taken from a desktop in responsive mode. The gray strip in mobile is created because the height allocated to this element is more than the image needs. (The images are shrinked according to their dimensions) if the image were to be in the same height as the service, it would be dis-proportioned.
To remove the gray bar from mobile, please add this code into your custom css box:
