Thanks so much for creating such a great theme.

I have a page with a series of content bands with very little content (mainly the background picture is what you want to focus on when viewing in a large browser). I then am using an accordion for more info that you can expand.

On mobile there becomes too much space beneath each band.I would like them to basically stack on top of each other and then when you open the accordion, it will push the band open revealing more.

Is there a way I can change how the content bands resize in this condensed setting (mobile or narrow browser) without effecting how it appears when wide on a large screen?

Thanks!

Chris

Thank you for your kind words.

You’ll need a media query for that. Can you give us the URL of your site so we could see your setup?

Thanks.

Please assign a class to each of your content bands then in the Customizer > Custom > CSS, please add the code below.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
.content-band-1 {
    height: 333px;
}
.content-band-2 {
    height: 250px;
}
}

For more mobile media queries, please see http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Hope that helps. 🙂

Looking forward to trying this out!

Chris

That worked great.

Is it possible to make it have the same dimensions if you were to narrow your browser completely on larger screens as well and then expand back to the original dimensions as you widen the browser?

Also, I have an accordion with info in each band. I would like the accordion to expand the height of the band and then retract when you close it in mobile just like it is in full screen view.

It does not appear to be doing that on the mobile after adding this css in the customizer.

Thanks!

To control height on all screen sizes, you’ll need to add more media queries and specify a height in each one.

/* Desktop and above */
@media (min-width:980px) {
    
}
/* Tablets */
@media (min-width:767px) and (max-width:980px) {
    
}

The accordions are designed to only expand to fill the container they have been placed in. Once you get your content bands set to the height you want, maybe we can take another look at the CSS for that, as it would be pretty custom at that point.