I built a personal website using Hugo and I like the way it turned out with one exception: all of the elements are just a bit too large. Zooming in the browser is able to smoothly reduce the scale of all components globally, and the website at 75% zoom looks much better to my eye.
Is it possible to globally reduce the scale of all components in Hugo or CSS so that the default scale for all components is smaller? I would much prefer a global scale rather than manually adding a scale parameter for every single component.
Website: http://www.markbuckler.com/
Code: https://github.com/mbuckler/personal-website
At 100% Zoom (current):
At 75% Zoom (what I would like 100% to look like):
Add to the 'html' tag 'font-size: 16px' and rewrite all your font-sizes, widths, heights etc to use rem(a ratio of the global font-size you just set as 16px).
Width of a div:
width: 1.5rem; (16px * 1.5)
This way you can scale the entire website based on a single value.
You could try the scale() transform as a quick and easy fix, although longer term it would probably be better to find a less hacky solution and do the proper layout without using transforms.
Maybe also of interest: What exactly changes in the css rendering, when desktop browsers zoom in or out on a website?
define your container max-width:1024px or anything you want and margin:0 auto;
.main-container{
max-width:1024px; /* you can change according to your website */
margin:0 auto;
}
Related
I'm using jQuery Lazyload Plugin. Before the images are loaded I use a dummy image as placeholder which is a 20x20 pixels blank PNG. Also I'm using jQuery wookMark which is a dynamic grid plugin. For this plugin to work I need the images to be in their correct aspect ratio so the plugin can calculate the suitable position of each grid element in the page.
I have width and height attributes on img tag set to the correct dimensions, but that doesn't have any effect on the dummy image and it will be shown as a square, no matter what.
I can use inline styles to set width and height for each image, but this approach will stop the image from being responsive in other dimensions.
Is there a way to give an image width and height in a way that it act like it is its real dimensions?
Here's the pen to look at:
http://codepen.io/anon/pen/iaIoJ
The only way you're going to get what you want is by using some javascript. You're already using jQuery so that will make it a bit easier.
Use the following CSS to begin with (as an example):
.myImage {
width: 300px;
height: 400px;
}
then when the images are loaded (in some sort of callback function I presume):
$('.myImage').css('width','100%');
$('.myImage').css('height','auto');
Alternatively, you can work with a placeHolder css class that has this height and widht, and then $('myImage').removeClass('placeHolder'); to clear it from the images.
I found a good way for it.It's not going to be pure css, but that's fine by me :)
My solution is to set the image height to 0 and use padding-bottom to maintain the aspect ratio:
<img src="./blank.png" style="height:0;padding-bottom:133.333%">
And also having a class for the img tag when the actual image is loaded:
img.loaded {
height:auto !important;
padding-bottom:0 !important;
}
Here's the pen for this example: http://codepen.io/nOji/pen/yoshA
Hope you find it useful.
I have collage like landing page... something like this:
Each object on this page is a separate image - wrapped in an absolute positioned div.
Now my goal is to make this page fully responsive. What is the best way to achieve this?
For a layout like this, I'd make the absolute positions percentage scaled, the widths of the images percentage scaled plus get the images centred on their absolute positions by using negative percentage margins (equal to half the percentage width). Also use percentage font-sizes. If you do that, I think the whole thing should scale more or less like it was one image. Then you can use media queries sparingly to hide things or make the layout different at breakpoints if necessary.
Here's an example:
#collage-item {
top: 20.3%;
left: 34%;
width: 2.1%;
height: 1.89%;
margin-left: -1.05%;
margin-top: -0.945%;
font-size: 50%;
}
Your best bet may be to look at some CSS Frameworks to help you achieve this, 2 spring to mind
1) Twitter Bootstrap
2) Zurb Foundation
Though there are many more out there I like these two as they are very easy to customise.
I'm working on a google map page for a jquerymobile site. I've got the map behaving as I'd like, and it displays beautifully, but the map element is too big - I can't figure out how to scale it to fill all the available space between the header and footer.
So I have:
header (let's say it's 30px tall)
footer (let's say it's 20px tall)
Since there are so many different screen sizes for mobile devices right now, I want the map_canvas to be device-height minus 50px tall. Can I do this in css, or do I need to use javascript? (Not averse to that, but it would be great to use pure css...)
You can use height: calc(100% - 50px) in modern browsers.
Due to general viewport wonkyness, auto-height is a slippery issue and not implemented reliably.
I've needed to implement something similar before on my mobile sites, and I found this article on Quirksmode to be infinitely useful - http://www.quirksmode.org/mobile/viewports.html
In your case, you'd want the height to be
document.documentElement.offsetHeight - (header.outerHeight() + footer.outerHeight())
or if you want to hardcode, document.documentElement.offsetHeight - 50. Of course hard-coding the value is a less maintainable way to go.
You could use javascript, or you could use relative heights. For example, set your header's height to say, 10%, the footer to 20%, and then you could set your map's height to 70%.
I am trying to build a website for myself.. I want to use an image as the header... I have made sure that my background will scale itself for any screen resolution... How do i make sure the image(header) will also scale it self according to the screen resolution...
for example: my image is 350px int width and 130px in height.. i want this to be the size when screen resolution is 1280X768.. and should change proportionally based on screen size..
Please tell me how to do this preferably using CSS.. i am also fine with js or jquery
Thanks in advance
Raj
If you only specify the width in css, the height will scale automatically. You can easily specify the with of the image relative to its parent.
In your example you would have to specify width: 27% (1280 / 350). Note that the parent will have to be 100% wide.
You can get the screen size from the DOM using screen.width and screen.height. Then you can write some JS to load or replace with the desired image or adjust the height/width attributes on the image (which would scale it, but doesn't always look great).
There is a good article on fluid grids by Ethan Marcotte, http://www.alistapart.com/articles/fluidgrids/
You can apply these principals to your images using CSS, he does on his personal site. There even good apps to help you out.
this one has a read me -> web duck
http://inteldesigner.com/web-duck/about.php
this one has more features -> em calc
http://riddle.pl/emcalc/
I am trying to change thematic default theme to take the whole browser page ...
for example: http://themeshaper.com/demo/thematic/
Is there a simple fix that can be done? I tried few things on that page with firebug but none seemed to have worked..
You can make the main container 100% width with CSS, but that would not only imply that you change all the width properties of the markup to percent values, as you'll not have the same result on different screens.
Also, it's quite difficult to work just with percent values when dealing with markup.
So, in conclusion, it might be possible, but quite hard if you don't master CSS.
The theme appears to be built with a "fixed" width layout -- meaning that the width of the page is set to a fixed value and resizing your browser window will not change the layout of the page. You are trying to change it into a "fluid" layout -- meaning that the page will adjust sizes to fit the browser window. Unfortunately, themes (and webpage layouts in general) are typically built as one or the other (fixed vs. fluid) and it is hard to switch between the two without changing a large amount of the CSS. So the answer to your question is: no, there is no simple fix.
Not sure about simple, here is some CSS to get you started, but you will probably find more as you dig into the different page styles, etc. Add it to the end of the main style.css for the theme.
#access, #branding, #main, #footer { padding-left: 20px; padding-right: 20px;}
#branding, #header .menu, #siteinfo, #main { width: auto }
#container { width: 70% }
#content { width: 90% }
.main-aside { width: 28% }
Also, beware of IE specific stylesheets, etc, that might change these same selectors.