Options
Seeking CSS codes to set display to 80% for Firefox and smaller-size monitors
Bluegrass
Registered Users Posts: 31 Big grins
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.
.
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.
.
0
Comments
http://www.pearlbluegrass.com/photos/i-m2CxQhX/0/O/i-m2CxQhX.jpg
http://www.pearlbluegrass.com/photos/i-vFcNwvx/0/O/i-vFcNwvx.jpg
http://www.pearlbluegrass.com/NEWSmugMug-Files/NEW-Jams/PAGE-Jams/n-
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
Musings & ramblings at https://denisegoldberg.blogspot.com
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.
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.
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.
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.