Seeking CSS codes to set display to 80% for Firefox and smaller-size monitors

Bluegrass

Hi -

Question
=====
Could a SmugMug hero or experienced CSS coder please advise me the correct CSS commands to display my SmugMug pages at 80%-zoom-level for FireFox users and also for people who are on the older narrower-width monitors or laptops?

References
=======
I think there is a way to display at 80% because of documentation on the internet that I've seen about CSS zoom/transform/scale as described at this link => http://www.fix-css.com/2011/05/css-zoom/
div.zoom {
zoom: 2; /* all browsers */
-moz-transform: scale(2); /* Firefox */
}
.
Or possibly using @media queries as explained at => https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
@media (query) {
/* CSS Rules used when query matches */
}

Background
=======
I really like being able to use a photo as the background image on my SmugMug pages. I did this and then used "percentages" to arrange a slide show content block and an html content block with text description "on top" of the background image hoping it would all scale.

The background photo scales to whatever browser or display I'm on, however, the slide show and text box do not. On the FireFox browser or the narrower monitor types the content blocks are too large and extend out past the margins of the window size.

* However *, if I set the zoom level to 80% on FireFox or the smaller monitors, everything looks fine just like it does at 100% on the wider format 17" screen I am developing on.

(Note: I am fine with the site switching to portraite mode on the a cell phone. I'm not talking about that.)

Screen Shots
========
In a few minutes will add 3 screen shots to this post.
.
1. I'll show how on normal (100%-zoom) on the wide-format screen the slide show and html text content blocks I've placed on the page by percentages, looks the way I want it
.
2. I'll show how on normal (100%-zoom) on FireFox or the older, narrower monitor sizes the slide show and html text block extend off the sides of the main window view
.
3. Finally, I'll show how if I set the zoom level to 80% on FireFox browser or the older, narrower monitor sizes, then everything looks fine as in #1, above.
.

Bluegrass

This is what FireFox displays at normal 100% zoom-level. This is the same as what gets displayed on the older, narrower monitors.
http://www.pearlbluegrass.com/photos/i-m2CxQhX/0/O/i-m2CxQhX.jpg

Bluegrass

But, if I set the zoom-level to "80%", on FireFox browser or on the older, narrower screens, the page displays correctly ! This is a screen shot with the 80% setting.
http://www.pearlbluegrass.com/photos/i-vFcNwvx/0/O/i-vFcNwvx.jpg

Bluegrass

I have not published to New SmugMug yet and am only modifying test pages so far, but here is the link to the page I am talking about for those who can get to it.
http://www.pearlbluegrass.com/NEWSmugMug-Files/NEW-Jams/PAGE-Jams/n-

denisegoldberg

I can't help with the code, but you may want to think about this. I don't believe this should be used as a design element.

The browser zoom level is for your viewer's comfort with seeing your content. It may be that someone with vision issues has used the browser zoom in order to be able to read the text on your page.

--- Denise

Bluegrass

denisegoldberg wrote: »

I can't help with the code, but you may want to think about this. I don't believe this should be used as a design element.

The browser zoom level is for your viewer's comfort with seeing your content. It may be that someone with vision issues has used the browser zoom in order to be able to read the text on your page.

--- Denise

Hi, Denise -

All I am trying to do is make the content blocks scale to the display size the same way the background image is doing. I did set all my content blocks by percent (not pixels) so I am not sure why they are not scaling.

The 80%-zoom-level is the only way I could figure out how to get the content blocks to scale down and stay placed appropriately in the right size and position on the page.

Richard

Have you tried stretchy layout? It works well to rescale gallery and folder blocks when resizing the browser window. Go to Customize->Entire Site->Layout.

Bluegrass

Richard wrote: »

Have you tried stretchy layout? It works well to rescale gallery and folder blocks when resizing the browser window. Go to Customize->Entire Site->Layout.

Hi, Richard -

Yes, I am using "stretchy" and that works well for the background image no matter what browser or display size.

However, the content blocks (titles, slide shows, html text blocks) only scale properly for Firefox and narrower screen sizes if I set the zoom-level to 80%.

I placed each content block using "percentages" and the margin settings under the "dimensions" icon after clicking customization.

Richard

Hmm...not sure I understand placement using percentages--do you mean the container width?

One thing I did early on to get things more to my liking on the home page was set the body width to a fixed 1100 pixels instead of the default auto setting. This probably has some disadvantages for viewers with very large screens, but the data I've seen in Statcounter show that only a tiny percentage of my visitors are using anything wider than 1920 px, which is what I use. Don't know whether this has anything to do with your problem, but it's just something else you could try tweaking.

Bluegrass

Richard wrote: »

Hmm...not sure I understand placement using percentages--do you mean the container width?

One thing I did early on to get things more to my liking on the home page was set the body width to a fixed 1100 pixels instead of the default auto setting. This probably has some disadvantages for viewers with very large screens, but the data I've seen in Statcounter show that only a tiny percentage of my visitors are using anything wider than 1920 px, which is what I use. Don't know whether this has anything to do with your problem, but it's just something else you could try tweaking.

Yes, that's what I meant, Richard. I set the width of each container (ie content block) by percentage (rather than by fixed pixel size) thinking this was what made the content blocks scalable. Thank you for your suggestion. I sure like stretchy and would like to be able to use that but will try your suggestion if I can't make that work.

Richard

Bluegrass wrote: »

I sure like stretchy and would like to be able to use that but will try your suggestion if I can't make that work.

Just to be clear, I'm also using stretchy. I only have the fixed body width on my home page, but the stretchy stuff still works there.

Bluegrass

Richard wrote: »

Just to be clear, I'm also using stretchy. I only have the fixed body width on my home page, but the stretchy stuff still works there.

Ah, I see that now. I just tried what you suggested (fixed body width with stretchy) but the reason this won't work for me is because I want to position the content blocks I'm putting on top of the background image in particular places on the page where the best parts of the background picture still shows. When I switched to fixed body width it moved all my content blocks to the center and covered up most of the background photo. If I can find a way to use the full screen and then scale it I think that will work best for what I am trying to do. Thank you for your ideas, though, I do appreciate your response.