Does anyone have advice on what size a custom background image should be? What is best practice so that in a responsive template (I'm using Nebula) the background image looks nice whether displayed on computer, tablet or smartphone?

I'm afraid there isn't a set size really it depends on the subject matter, template and space to work with

The best images generally are more abstract pattern images. I tend to look at the quickstart image sizes and play around from there with the dimensions

Cheers
Paul

Thank you for confirming this; this is what I am discovering. I find that if I place background images that have specific images/elements in them, they can be treated differently by different screen sizes. So I am recommending a different/more neutral background image to my client.

That being said, I noticed that screen size (smaller computer screen size width and tablets) make the contact button in the menu slide down to the "next row" –is this a problem I created by adding that line of custom css? (below)

}
#navwrap ul.nav > li > a, #navwrap ul.nav > li .separator {
padding: 0px 12px !important;
}

OR is this again an uncontrollable element due to screen size?

Always Appreciative,
Maria Lara

Generally with elements moving around in different screen widths its a case of creating media queries with targetted css inside them

So it could be

@media ( max-width: valuepx ) and/or a (min-wdith: valuepx) {
then the css { }
}

Cheers
Paul

If you have a site and a width in mind I can steer you in the right direction

Cheers
Paul

Well, I'm a little out of my skin here. But, would you say that within in the template manager, under Layout, I should be able to fine-tune to accommodate smartphone and tablet,right? Is there something I am misunderstanding or is this not what this section of template manager is about. Thanks for the continued support, Paul.
~Maria Lara

Update: Now that I have had an opportunity to play in template manage/format, I can see that I cannot dictate the resizing of the menu/nav bar and its items. I can change how modules display (although I think I am not see adjustments made on smartphone because the cache isn't cleared).
So, I think I do need to look at the tablet in portrait display and how it knocks the contact in the nav bar down. The url is now live: www.secondgrowth.org –Hooray!

You can tune certain features of templates using the the layout tab but some elements as with the menu in the template either need adjusting via php or via css

Congratulations on the site

Cheers
Paul

Thank you for the congrats; I couldn't have done it without the JB team.

I don't know enough about php - still green behind the ears. But, I am more comfortable with css.

In one of your above posts you wrote:

@media ( max-width: valuepx ) and/or a (min-wdith: valuepx) {
then the css { }
}

Even though I am comfortable with css, I look at this and think, okay is that that something like:

@media ( max-width: 1024px ) and/or a (min-wdith: 768px) {#navwrap ul.nav > li > a, #navwrap ul.nav > li .separator {
padding: 0px ??px !important;}
}

and where is @media? I don't see it in the template css.
How do you decide max and min? based on the size of say an iPad and/or android tablet (which apparently varies greatly)? And how do I know what to change the padding to (assuming this is what is supposed to happen).

Portrait 768×1024 (1536×2048-Retina) pixels
Landscape 1024×768 (2048×1536)

I pulled these iPad sizes off of:
www.vickiwenderlich.com/2012/07/iphone-ipad-basic-screen-component-dimensions-updated-for-retina/

As you can see, I'm wading into new water and am a bit lost-but not completely drowning.

Gratefully,
Maria Lara

Along the lines of

/* media query for device etc */

@media (min-width: 768px) and ( max-width: 1024px ) {

#navwrap ul.nav > li > a, #navwrap ul.nav > li .separator

{padding: 0px ??px !important;}

}

When using media queries for the first few times I'd make sure you layout the css quite carefully as it will seem a bit odd adding extra brackets

I'm not an ipad user (too poor) so not 100% sure this will apply but I use the chrome DevTools

With the DevTools open it will show the screensize in top right corner so when I resize the screen it gives me an idea of the breakpoint I need to target (the dimensions will resize as I drag the screen smaller)

Cheers
Paul

With the screen a reduced size I will need adjust the values in the styles window so it displays ok in that sized window

- making sure to paste styling values to a simple text editor like note pad

That will give me the values I need for a media query

Cheers