Supporting Media Queries for Blocks

Aug 17, 2018

I'm fairly new to Rise, but I am exploring the idea of having images fixed with the bottom edge of blocks that I apply background fills to. If you look at the attachment "Text on Image Block - no padding" you see how I have an ultrawide image in the background (just taking advantage of transparent background to get the dog on the right). 

If you look at the output of "Text on Image Block - Mobile" you see that the dog is off the screen. Which, given the use case for Text on Image blocks is totally understandable. They are meant to just be a generic background set via a cover property. 

Normally, I would think that the Image and Text Block is made for these sort of layouts, however there is an additional CSS class applied to images in these layouts (.block-image__figure) that applies a margin to the bottom making it impossible to nest images right at the bottom of the block. 

I could override the CSS in the output, but that doesn't seem ideal. Is there a way to turn blocks off for certain screen sizes (like media queries in CSS). If that's possible I could have my landscape Text on Image Block for desktop outputs, and do something like what is seen in the "Text Block plus Centered Image Block - Mobile" attachment for phone screens. 

Again - I'm still orienting a bit to the tool - so please let me know if I am missing something. Thanks everyone!

Be the first to reply

This discussion is closed. You can start a new discussion or contact Articulate Support.