[Chris AParticipant]

I am really liking the way my site is coming together with the help of all of the great features X has.

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

[ChristianModerator]

Hey 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.

[Chris AParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey Chris,

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. 🙂

[Chris AParticipant]

Thanks…I just looked for some info about assigning a class. I’m not sure exactly what to do there.

Looking forward to trying this out!

Chris

[Chris AParticipant]

Is this the same as the ID we use for the menus? It looks like it might be.

[Chris AParticipant]

ok…got it. I placed content-band-1, content-band-2…etc…in to the class field in the content band.

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!

[AlexanderKeymaster]

Hi Chris,

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.

[Chris AParticipant]

thanks!

[SupportMember]

Glad we could help. If you have any questions, let us know.

[Chris AParticipant]

hmmm…anyway to tailer this for specific pages?

or to have it expand depending on the content?

I have another page and the content bands have more content and now that I have constrained the bands on the homepage, the content on the new page is overlapping the content bands on mobile.

Thanks!

[Chris AParticipant]

Actually it appears that this code:

/* 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;
}

is not altering bands separately…whatever value I type in for .content-band-1 sets the height for all bands…

I have different values for .content-band-2, .content-band-3.

but they do not change the height

[RadModerator]

Hi Chris,

You could use this one, 🙂

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

Hope this helps.

[Chris AParticipant]

This reply has been marked as private.

[MrinalMember]

Hi Chris,

Can you show me a screenshot please? As right now this page: http://www.chrisarvan.com/americana-6-26-14/ seems perfect in both larger & smaller devices.

[Author]

Posts