How do I make the media-query wrap my divs?

Question

I'm running Shopify Debut theme. I am attempting to edit the Hero section which is a text overlay with background image.

I have two divs that I created and I am able to place them next to each other. However, when I reduce the size of the screen to mobile, the div on the right side just gets shoved off the screen.

There is a media-query for each div (from the shopify theme). I think I need to edit this to change the display type of the divs, but I'm not sure. Can you advise? I have stripped-down code in jfiddle.

  @include media-query($small) {
max-width: $width-site;
padding-left: $gutter-site-mobile;
padding-right: $gutter-site-mobile;}

See fiddle for details: https://jsfiddle.net/tulanejosh/dj7cskpp/1/

Thanks!

css css · Accepted Answer · 2018-01-31T11:29:57

this is not css, it is sass/scss .. so your mediaquery can't work because $small is not defined

you should post the compiled css

How do I make the media-query wrap my divs?

1 Answers