Down sizing entire site by 25% ?

@Rael74Sep 13.2018

My site has html / CSS and JS

Is there a way in the html to down size the entire display to 75% of what it is now? It displays fine on a laptop but in all honest I created everything a bit large due to poor eye sight. Would this be accomplished with a <DIV></DIV> command and would this down size the background image which is being pulled from the “CSS.”

I am not very good at coding and every time I try something different, I create problems elsewhere in the code.

Thanks for any help

to post a comment

HTML

16 Comments(s) _↴

@SempervivumSep 13.2018 — #This can be done easily by CSS:

body {
 transform: scale(0.75);
 }

@Rael74authorSep 13.2018 — #Thank you very much

@Rael74authorSep 13.2018 — #Hmmmm that did sort of work but only on page content but not the background image. I then tried putting it before the background image and that made no difference. Then I thought I was getting smarter LOL and I downsized the background image by 25%. It did make the background image smaller and did down size the page but then the image was the wrong size for the page. I need to take everything I have created and down size it together in one shot.

My major problem is when viewed on a smaller media device like a tablet, for some reason the back ground image displays off the left side of the page when viewed in the vertical perspective. I have been trying the different media commands but with no luck. Looks like I should have started this thread in the CSS section and not the html, but I just wasn't sure where my problem is coming from.

If you have a tablet, please check out the site on the tab in the vertical perspective and you will see what I mean. I put it back the way it was - etaim.com

Thanks for the help

Could one of the mods please move this to the CSS folder if that seems a better place. Sorry, newbie

@SempervivumSep 13.2018 — #Maybe my advice was not a proper one. Try the meta tag for the viewport instead:

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

initial-scale should do what you need; set it to 0.75

@Rael74authorSep 13.2018 — #Actually I have that in there - It may be entered incorrectly as I really don't know what I am doing. I have it in the html as follows - is that where the viewport command "should" be?

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width">

<meta name="description" content="Aerial Imaging and Videography">

There is more but this will show the way I have it in the code

@SempervivumSep 13.2018 — #Simply adding initial-scale shoud do the job:
<meta name="viewport" content="width=device-width, initial-scale=0.75">

@Rael74authorSep 13.2018 — #Awesome let me give it a shot

Again thank you

@Rael74authorSep 13.2018 — #Hmmm strange, that didn't make any difference. should I edit the CSS as well as the html meta??

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=0.75">

<meta name="description" content="Aerial Imaging and Videography">

Above is what I have in the meta currently

trying to add a couple pics here to show you the problem I am having

@Rael74authorSep 13.2018 — #Trying to upload but the field seems grayed out

@NogDogSep 13.2018 — #You could try adding background-size: contain; to your CSS for the element that specifies the background-image.

See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images#Special_values.3A_.22contain.22_and_.22cover.22

@Rael74authorSep 14.2018 — #Hmmm that did down size the bg file but for some reason, as before it moved the entire picture to the left and left a blank space showing the back ground color all the way up the right side of the page where BG file should have been. There has to be something in the code that is making this move left. It did show the full image this time but was small and to left.

@NogDogSep 14.2018 — #Maybe try "cover" instead of "contain"?

"The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container."

@Rael74authorSep 14.2018 — #Hmmm that did allow the bg image to size down when I changed the size of the window but the rest of the page went off screen. Has to be a couple commands in there to get it to work.

Is it possible to just remove the bg info from the css and then put a background in the html and use the

<meta name="viewport" content="width=device-width, initial-scale=0.75"> tag?

I still wonder what is making the bg move to the left an inch or so on smaller media. It's just moves all of it to the left and leaves a blank background in it's place. Very strange

@rootSep 14.2018 — #Use JavaScript and not a Library / Framework, that can half the site size in one rile removal.

@Rael74authorSep 14.2018 — #Thank you, but I am a very novice coder and I do not know how to do that.

That is why I started off with a template. Thought I could figure out how to make it do what I wanted. The site actually looks better on a tablet than on my laptop, but every time I make the bg picture smaller, it does not line up with the rest of the links on the page.

@Rael74authorSep 14.2018 — #@NogDog#1595801

OK, it is not perfect but I found a work around for the bg image problem. I am much better in photoshop than html or css so I cropped the image I was using and then created a new one the same size as original and pasted the cropped image to the right and then filled the left with background color.

Now it is displaying on tablet correctly and with luck I can figure out from this forum post the way to downsize it on laptop to make it look the way I want and not change the page format

This forum is AWESOME thank you for all of your help. Thank you nogdog / sempervivum and root. Hopefully I can figure it out from here, but if not, I know where the best forum to receive "useful" help is and I will be back.

Tks again

Doug

Also in #HTML _↴

I'm having problems with images showing up... (making a win 7 gadget)Is it possible to read a hyperlink from text file w html?table and div help

Success!

Help @Rael74 spread the word by sharing this article on Twitter...

Tweet This

Down sizing entire site by 25% ?

16 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Down sizing entire site by 25% ?

16 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

16 Comments(s) _↴

Also in #HTML _↴