Skip to main content

My widgets are coming in at different sizes and it’s frustrating! Is there a way to set the heights of the widget so that they’re the same sizes? Would I do this with CSS? I measured the height with snapshot and then created an image of that height and it looks better (see top left image) but it’s not great… 

 

Any idea how I could fix this with CSS? 

 

 

yes, SOME widgets have that option...it’s all the way down at the bottom of the widget set-up panel...


Yes but is there CSS that I could use for the widgets that don’t…. My image widgets on a different page are all the same height in PX… but it’s displaying them like in my example as not the same height…. 

 

how can I address this it looks bad.


I usually end up not using image widgets and use the HTML one so can put in inline height/width style attributes on the image line. You can use the image widget to basically upload the image and then grab it’s URL to use as the src attribute.https://www.w3schools.com/tags/tag_img.asp


When the sizing matters more, I do as @Bfarkas said - I put the images in HTML widgets instead of image widgets.  I’ll also use tables to easily include more than one image in a row and have those use the same height or width within the table.


When the sizing matters more, I do as @Bfarkas said - I put the images in HTML widgets instead of image widgets.  I’ll also use tables to easily include more than one image in a row and have those use the same height or width within the table.

You can and should do this with div’s instead of tables to keep it more flexible, accessible, responsive and semantically correct, but yes you can put multiple in one widget, which is another win since you can have more on the page. 


We encountered a similar problem when using both image and video widgets in a row. The specific issue was with the video widget, as its height couldn't be easily adjusted. One possible solution is to utilize the HTML widget, which allows you to add images and embed videos, providing greater control over dimensions as mentioned above. Alternatively, you can maintain consistent widget heights by separating image widgets into one row and video widgets into another.


I looked quickly and could not find yesterday, but theres some writeup on more detail on different approaches similar to this on this thread, especially toward the bottom if interested:

 


Reply