I bought a bootstrap 4 admin theme but its sizing (fonts, spacing, images) for desktop is to large was the feedback I got from client.
However if I change the zoom to 70% the sizing of all the elements is exactly what I need.
I want to make the 70% zoom default in the css for desktops but that only keeps it for my browser on my computer. Is there a css setting or other setting that allow me to do it for all computers.
Since the base theme will get updated by the original auhtor often
I have tried changing the css - font size, spacing, image sizes on so many CSS elements but surely there should be an easy way to simulate make it 70%.
You can adjust the css styles of your elements to fit the purpose.
Have a look at the current value and multiply them with 0.7
If the sizing is defined in rem you can just change the html sizes for the content to fit as rem is aquivalent to the sizes of the html wrapper
Related
I am struggling with setting up the font-size so it looks similar in all desktop devices.
For now the problem is that on my new laptop sidebar ends on 75% of total web height and on my old laptop it is exceeding 100% of screen height and I had to implement scrollbar. Is there anything I can do to prevent from it and to keep it the same. I tried these 2 solutions but they don't work].
I am using default Bootstrap 5 typography. I am using h1-h6 and p tags on all websites. No custom font sizes and classes applied.
Learning about rem and try to make whole website responsive.
According to the value of 1rem, should I be scaling:
Font sizes and margins/paddings around text
margins/paddings/size of elements that do not directly contain text like components and images
Does this depend on the layout?
For example, I have an image in a card component. As user increases the font size, image or space around it might stay small next to a larger font.
Should I let this happen or scale image with the font size? I know the setting in the browser only changes font size. On Facebook, for instance, font size from browser settings does not affect the images or component sizes.
Should I then only worry about text?
I think this is entirely based on context/preference but,
Generally yes, if you are using 'em' for padding/margin (which you should be) this will scale automatically however to the font-size of its element.
Depends on the element, text is hard to read for some people as its small lines in unique shapes so this makes the most sense to scale however images and other elements are generally a lot easier to look at. - if the content of the element is something like an icon for button I would probably scale it with text as it is likely to be adjacent to some text so would look weird if the text scaled but the element didn't. Otherwise I would just use responsive web design such as flex/grid to fill the space of a page, this is "scaling" however less for accessibility and more for design.
I have a responsive Bootstrap page with fixed-size divs containing text. To avoid the text overflowing the div as it changes size, I'm using this solution with media queries to change the default font size.
However, the $font-size-base variable in the Bootstrap sass variables is still defined in terms of pixels and therefore stuff using it doesn't obey this scaling. I tried changing the font-size-base to 1em, but this cause a whole cascade of errors of Incompatible units: 'px' and 'em'.
I could basically overwrite the font sizes I need to be variable in my custom sass file, but this seems like kind of a kludgy approach. Is there a cleaner way that I can make Bootstrap use ems for the font size so that it will change according to my media queries?
Normally when I am creating a responsive site, I do the normal thing of setting a viewport to the device width, and creating different layouts for different screen resolutions.
But I'm doing a few tweaks to an old site that has big chunky buttons, default font sizes and a simple layout, and actually it looks quite usable when viewed as a desktop-style fixed-width layout, even on small mobile devices.
Rather than specifying a viewport and completely rewriting all the css to make a series of mobile-friendly versions, I'd really like to just increase the main body element font size a little more for viewing on a screen that is physically small: for this particular layout, this would be very usable - if I could work out how to do it!
Is this what -webkit-text-size-adjust: is for? It seems like it should be an easy thing to tweak, but all my googling turns up full responsive design approaches, which are overkill for this particular small task.
A way to make it is to detect the screen width with javascript using the window.screen.width property, and then apply the styles that you want from there.
Here's an example using jquery, however the same can be achieved with native javascript if you don't want to use a library http://jsfiddle.net/UXV7Z/
You can apply as many filters in resolution as you need, just like you would using media queries
DONT use javascript for such a simple task to accomplish with modern CSS, just use:
font-size: calc(80px - 3vw);
and adjust the values accordingly. That will icrease the size on smaller devices and decrease it on wider devices, which makes sense for buttons and footers and what not, but if you want to decrease the size on smaller width screens for text like large titles that overflow just use:
font-size: calc(25px + 0.35vw);
Once again adjust the values to fit your needs. And see here to view the browser support for the CSS calc() function. All modern updated browsers support it
I'm redesigning my site because looks awful on different resolutions (apart devices), most guides and tutorials rely on % and em than fixed values. I'm still learning this so I'm reading everything around.
Thought this would solve the question with different display sizes but again: we have to craft some more CSS for fix some specific issues.
If I need to add media-queries for extra display sizes, why use % then? Do use % really reduce coding? Is ok need to add some extra css for some sizes or am I doing something wrong?
Thanks for any advice!
The purpose of using em sizes is to allow the base your design off of the user's choice of font size. I may use a larger font size because I have a huge monitor and poor eye sight, while someone else might prefer a smaller font. By using em units, your design will accommodate both of our font preferences and resize accordingly instead of forcing the font size to a given standard (eg. "12 point font").
In a similar manner, percent (%) units allow your design to respond to different browser sizes. Used in conjunction with em units, this will allow text-based elements to respond to arbitrary font size choices, and layout elements to respond to arbitrary browser sizes.
It is perfectly acceptable to design a single responsive design for all media types. Media queries are intended when you want different display styles on different devices, not to "support" different display sizes. An example would be to use serif fonts on print media and sans-serif fonts on display media, since usabilities studies have shown that these font faces are preferred for these sorts of media.
Furthermore, it allows you to do custom styling for some situations like mobile devices, where you may want to consider that the user has a limited amount of bandwidth and maybe cut down on extra images. Or if you want to display your content in a completely different layout for the microscopic screen afforded by certain phones.
% allows your site to be responsive to the user's method of viewing. Let's say you have a div that's at 100%. It'll fill the entire section, regardless if it's on a phone or desktop.
It should be okay to add extra CSS for sizes as well. As far as I know, you can have some elements display in % and some with a fixed px value, although they might conflict depending on how the page is setup or what it is being viewed with.
For example.
Your website header have the width of 950px; But in a mobile device, it may fit at 450px;
So, you use media-query to reposition some elements and handle some size issues and set the header width to 450px;
But, if you use % values, you can set your header div to have 100% of width base in its parent. So you can only change the body or some container div width, the all childs going to adapt.
Diana,
I am glad I came across this question. I literally just uploaded my first responsive design which is 90% based off of percentages when it comes to font-size and widths.
Check out the below:
http://www.noxinnovations.com/portfolio/responsive/
Obviously, it doesn't look amazing, and the image looks way out of place... But do me a favor and resize your browser window, by slowly making it smaller and smaller. I did that by setting a percentage width!
Trust me, I tried doing this responsive design test with pixels, and it didn't turn out too well. The percentage width ensures that regardless of the resolution and or pixel dimensions (per se) the design will always cater to the size of the screen. Also, I did not have to use one CSS3 Media Query, but I would highly suggest using CSS3 Media Queries only when you need them.
In my opinion, I should probably have a Media Query for a larger screen.
I hope this helps you as much as it has helped me!
Thank you,
Aaron