When I resize the window width-wise it looks fine, but when adjusting the height, the text does not resize, which in turn creates overflow across the bracket.
#body div[class^="side-"] ol li p.game a {
color: #000000;
font: bold .7vw/1 tungsten, sans-serif;
height: auto;
width: auto;
padding: 0;
box-shadow: 0;
}
I've tried using vmin, but that does not help as the height of the window is almost always smaller than the width. Is it possible to use both vw and vh so that the window adjusts to both width and height resizing?
Yes, depending on the specifics of your use case. CSS allows for aspect-ratio media queries. This could allow you to have one vmin or vw/vh size for various aspect ratios. A rough example based on yours:
html {
color: #000000;
font: bold 7vw tungsten, sans-serif;
height: auto;
width: auto;
padding: 0;
box-shadow: 0;
font-size: 20vmin;
}
#media (min-aspect-ratio: 3/1) {
html {
color: #00a;
font-size: 14vmin;
}
}
This should allow you to solve for your concern about aspect ratios: "I've tried using vmin but that does not help as the height of the window is almost always smaller than the width".
Depending on your design, using vw when the screen is wide and vh when the screen is taller may be better than using the vmin shown above.
Maybe, you can see the property word-wrap: break-word ?
Else, you can see :
#media all and (orientation: landscape) { /* HERE YOUR CODE */ }
Related
I have a problem where rem is not receing any of my elements when I change the size of the screen for example I have a padding on the body that is 3rem and my font-size on the html element is 62.5% yet when I resize the screen the padding on the body remains at 3rem or 30 pixels
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777;
padding: 3rem;
box-sizing: border-box;
}
I have also included the viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
The way you have it, the rems would only change if you change the font-size.
If you want to adjust rems based on screen size you need to use media queries and change the root font-size there, e.g.:
html {
font-size: 62.5%
#media only screen and (max-width: 900px) {
font-size: 56.25%;
}
}
html {
font-size: 62.5%;
}
will in normal circumstances ensure that the basic em size is 10px. This is because browsers will default to 16px for the font-size and 62.5% gives you 10px - making it easier to know what, for example, 3em actually is (30px).
If you want to have a coninuous decrease (or increase) in font-size when you decrease (or increase) the viewport width then you can set font-size to be proportional to viewport width. For example:
html {
/* font-size: 62.5%; */
font-size: 1vw;
}
However, there are a couple of caveats. Some browsers (I believe Chrome does this) do not allow font-size to get too small. More importantly, a user may set their default em size to be larger so they see text enlarged and setting a font-size in absolute units rather than percentage terms will override that.
Therefore it needs careful thought before reducing font-size just because the viewport is smaller - the user still needs a decent size to be able to read things well. This is true whether you use the above 'continuous' method or a set of media queries to reduce the size. It's not necessarily advisable. Unfortunately it is not possible to tell how far away from the screen the user might be based on viewport size.
Problem = Text overflowing container with Zooming (CMD +).
Before zooming =
After zooming =
The following solves it, but I am very reluctant to accept ViewPort units because of their lack of full support by all current Browsers, not to mention the legacy Browsers:
html {
font-size: 16px;
font-size: 2.4vw;
}
Another much more serious problem with ViewPort units is that they obviously scale with window size and I do not wish to do that.
I wish:
(1) nothing to happen to the font-size with window resizing.
(2) ... but I do wish the font-size to decrease such that the above container overflow does not happen with zooming.
(3) avoid Javascript and CSS #media Queries if possible.
Here's the appropriate code:
HTML -
<div id="roundedTextCorners" class="centerBlockContents">
<div class="headerText">
MY VERY OWN GUARDIAN ANGEL!<p>
MY LOVE SONG FOREVER!!
</div>
</div>
CSS -
#roundedTextCorners {
border: 0.3125em #994c00 solid;
border-radius: 0.625em;
padding: 1.0em 1.0em 1.0em 1.0em;
background-color: #994c00;
color: #fff;
}
.centerBlockContents {
text-align: center;
}
.headerText {
font-family: Georgia, Helvetica;
font-size: 1.60em; /* at the top level */
color: #fff;
padding: 1.0em 1.0em 1.0em 1.0em;
}
Any ideas ??
First and foremost, thanks Mr. Lister, for sticking with me on this challenge.
I finally I decided on a "solution" I was happy with. Inevitably, I decided a max-width had to go somewhere, either in the <body> or in #media. I chose #media because I concluded I despised horizontal scroll bars more than the jerkiness inherent to #media.
I've tried to create a login form using ONLY vh sizes.
Doing this, in the hopes that the form, in all, would scale accordingly to the viewport.
It doesn't! For some reason zooming in, creates a blank space that keeps getting bigger the more you zoom, between the input fields and the text below.
http://jsfiddle.net/TnY3L/
The fiddle isn't very well made, just copied it from my project.
But you can see what's wrong - and that's what counts.
Anyone have any idea as to how I were to go about fixing this?
<span id="loginform">
<input type="text" name="login" class="LFORM" placeholder="USERNAME" />
<input type="password" name="password" class="LFORM" placeholder="PASSWORD" />
<button id="LB" type="button" style="font-size: 1.4vh;">OK!</button><br />
Create account
Forgot login?
</span>
::-webkit-input-placeholder {
font-size: 1.4vh;
}
#loginform {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
right: 1.5vh;
}
#CALINK {
float:left;
font-family:my_fat_font;
}
#FLLINK {
float:right;
font-family:my_fat_font;
}
#LB {
border-radius: 0.4vh;
font-family: my_fat_font;
color: #ffffff;
background: #ff9f2d;
padding: 0.2vh 0.8vh 0.2vh 0.8vh;
text-decoration: none;
border: none;
height: 2vh;
margin-left: .5vh;
margin-right: 0px;
border: 0;
}
#LB:hover {
background: #3e4188;
text-decoration: none;
}
.LFORM {
width: 10vh;
height: 1.8vh;
border-radius: .3vh;
border: none;
padding-left: .6vh;
}
[placeholder]:focus::-webkit-input-placeholder {
color: transparent;
}
#loginform a:hover {
color: #ff9f2d;
text-decoration:underline;
}
#loginform a {
color: #ff9f2d;
text-decoration: none;
}
The vh and vw units are a measurement relative to the viewport size. 1vh is 1% of the current viewport height, so 100vh is always 100% height. No matter how much you zoom in and out, the viewport is still the same size.
When you zoom in, you scale up the entire document (but not the viewport). It's logical that the space between elements increases as you zoom in the page, if that space is not defined in viewport units as well. Because the other elements don't increase it takes the document out of proportions.
If you want to create elements that scale as you zoom in, try using the rem unit. This is relative to the body's font size, so as you zoom the page in every value expressed in rem will scale accordingly.
vh and vw properties are bound to the the viewport size.
Many browsers (e.g. Chrome) behave in a way that when a browser is zoomed by user's action using browser's built-in zoom functionality vh and vw values are changed considerably.
But if you use css zoom property vh and vw remain the same.
If you need to take over this limitation you can set CSS variable according to your zoom level in CSS.
html {
zoom: 90%; /* zoom your page to 90% */
}
:root {
--zoom: 0.9; /* set the variable saying what the current zoom is */
}
And when using vh and vw units calculate it like this:
width: calc(100vw / var(--zoom));
I'm trying to get the vertical piping for the about section to go away when the browser viewport is reduced to 990px or less wide.
Here's a fiddle of what I have, but can't get the #mediaquery to work: http://jsfiddle.net/8wsm7pfy/
Do you mean the border-left? If so, you need to override it. Just leaving it out won't do anything. Also, "990px or less" would need a max-width media query:
#media (max-width: 990px){
.about{
color: #000;
font-weight: bold;
height: 200px;
border-left: none;
}
}
Here's the fiddle:
http://jsfiddle.net/8wsm7pfy/2/
You're also missing an end </div> tag in your first .
I am helping with the port of a site to a new server. All of this is inherited code. An example page is this one: http://fcxcobalt.fmi.com/products/
This heading:
<h1 class="main-content-heading"><span class="wrapper">Products</span></h1>
At screen widths less than 1690px the heading aligns as desired:
But at 1690px and higher widths the element left aligns to the body of the document.
The heading's own CSS may not be the issue but it is
.main-content-heading {
margin: 0 0 1.2em;
padding: 0.5em 0;
font-weight: 300;
color: #fff;
background: #1c3f94;
text-transform: uppercase;
}
Unminified CSS can be seen here: http://pastebin.com/s5MVMZVj
Can anyone advise me as to how this alignment can be made consistent?
What you are seeing here is the result of a media query in the CSS:
#media screen and (min-width:1707px){
.wrapper,.page-head,.site-menu,.droplets,.wide-content{
margin:0 auto
}
}
#media screen and (max-width:1040px){
.wrapper,.page-head,.site-menu,.droplets,.wide-content{
margin:0 3%
}
.bx-aspect-wrapper{
margin-bottom:-10em
}
.bx-pager{
right:3%
}
.bx-slide-caption,.bx-prev,.bx-next{
font-size:130%
}
}
The switch over takes place at 1707px (you estimated 1690px, well spotted!).
This is an example of a responsive design, and my guess is that the designer wanted to keep some left/right margin for smaller screens where as margin: 0 auto would lead to the margins collapsing all together.
There is nothing wrong with your browser and the CSS is working as intended.
Of course, the sharp transition may be a bit unsightly to some.
This might be made smoother by setting margin: 0 Mpx where M is a magical number of pixels that might be close to (1707px - {page layout width in px})/2, but you would have to try it to see.
Fixing Layout Glitch for Widths Greater Than 1707px
I found that if I leave out the margin: 0 auto declaration in the following CSS snippet, the "Product" label stays where it is suppose to.
I tested this in Firefox only.
#media screen and (min-width:1707px){
.wrapper,.page-head,.site-menu,.droplets,.wide-content{
margin:0 auto
}
}