Full Height Responsive Widget Images

Asked on January 14, 2016 in How To.


I was wondering how you achieve  full height widget images like in the
following website:


Is there any flexibility to this type of layout, such as specifying different column widths for the image? For example having the flexibility to choose whether the image takes up half the widget, two thirds, three quarters etc.

All help appreciated.

Rickerby Layers User
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on January 15, 2016.

    Hi there,
    It would be best to ask the kit author how that layout is done (CSS or Content Widget layout). It appears as though that is a content widget with a full-width layout and the padding/margin set to 0, then on each column it is set to 12/12 (one column per row) using a featured image with the left or right layout applied. The style kit will add styling that supports things like the text being centered in the column and the title underlines etc.  The width of the overall column would determine the size of the image and text. If you wanted to do something like have a 2/3 – 1/3 layout with the image taking up the first 2/3, you would set the first column  to 8/12 and only add a featured image set to top, and then set your second column to 3/12 and add only text.