I have made it so that my background image scales to fit the size of the viewport. Now, I want the text to scale relative to the background image. Note: I am using the <img> tag for the background image because this allows for scaling with smaller browser windows (i.e., mobile devices).
CSS
img.bg
{
min-height: 100%;
min-width; 781;
width: 100%;
height: auto;
top: 0;
left: 0;
position: absolute;
z-index: 1;
}
#media screen and (max-width: 781)
{
img.bg
{
left: 50%;
margin-left: -390.5;
}
}
#container
{
position: relative;
top: 0px;
width: 781;
height: 758;
border: 1px solid black
z-index: 2;
}
#left
{
position: relative;
left: 1.280409731113956%;
top: 14.51187335092348%;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
width: 50%;
height: 50%;
z-index: 2;
}
p
{
font: 14px Georgia;
color: #FFFFFF;
}
HTML
<img class="bg" src="background.jpg">
<div id="container">
<div id="left">
<p>Text</p>
</div>
</div>
You can't scale text dynamically in this way with css alone as far as I know.
you might be able to do it with jQuery if you make the selected font-size proportional to window.innerWidth using something like this.
function resizeText(event) {
//your text element
var $text = $('h2');
if(window.innerWidth <= 781){
//font scaling ratio
var fontSize = window.innerWidth/100;
$text.css('font-size', fontSize+'px');
} else {
$text.css('');
}
}
//run above on window load and resize events
window.onresize = resizeText;
window.onload = resizeText;
Are you doing all your text or just headings? You might want to look into "Fittex" or "Bigtext".
You can do it with strictly using CSS and Media Queries.
I also saw another method on here a few days ago with someone's method to do it strictly with CSS and without media queries.
Also check out this post:
Is it possible to dynamically scale text size based on browser width?
Related
In my program, I need to place the image of a button on top of another image exactly where that button is supposed to be. To be able to use it in different monitor resolution, I position the images using %. I also set up height and width of the body (or div) to 100vw and 100vh (i also tried to screen.height and window.height). But when I change resolution of the monitor, the images adjust to the new resolution but now with enough precision y the height (width is fine). The button is displayed a little bit higher in a lower resolution. Why is not working?
.alarm img {
position: fixed;
width: 4.5%;
left: 41.7%;
top: 71%;
}
.faceplate img {
position: fixed;
width: 17%;
left: 40%;
top: 40%;
margin-left: 0px;
margin-top: 0px;
}
<html>
<body style="width:100vw; height:100vh; margin:0;padding:0">
<div_logo class="faceplate"><img src="pictures/asel3_faceplate.png">
<div_alarm class="alarm"><img src="pictures/asel3_alarm.png"></div_alarm>
</div_logo>
</body>
</html>
You should use media queries to fix this problem for different screen sizes. You have to create different types of CSS for different types of screen sizes.
In this fact, you have to go to media queries.
For more details, you can follow the link
https://www.w3schools.com/HOWTO/howto_css_media_query_breakpoints.asp
In media, query defines your CSS style for different screen sizes.
I hope this is what you are expecting.
.faceplate {
top:25%; /* just change this */
left:25%; /* just change this */
position: absolute;
}
body {
height: 100vh;
width: 100vw;
margin: 0;
position: relative;
padding: 0;
}
.faceplate {
top: 25%;
left: 25%;
position: absolute;
}
.faceplate > img {
width: 90%;
height:90%;
}
.faceplate .alarm {
position: absolute;
top: 0;
}
.faceplate .alarm > img {
width: 70%;
height: 70%;
}
<html>
<body>
<div class="faceplate"><img src="https://dummyimage.com/100x100/e055e0/fff">
<div class="alarm"><img src="https://dummyimage.com/80x80/000/fff"></div>
</div>
</body>
</html>
So I have my media queries set to have an element positioned "X" pixels relative from the previous element at a min-width of 756px (the resolution of my iphone 6S). On my windows desktop, I positioned the element to where I want it to be. However, when I open the site up on my iphone (using the default Safari browser), the element is off by over a hundred pixels! The element is positioned higher on my iphone than it shows on my desktop. Any ideas? I checked my zooms on my desktop browser and they are all set to 100%.
edit: Here is a fiddle mockup of my code. https://jsfiddle.net/8f6y1pdx/1/
<header>
<div id = "navContainer"><h1>Hello</h1></div>
<div id = "backgroundImage"><img src = "http://cdn.wallpapersafari.com/4/18/laMvrx.jpg" width = "2560" alt = "bg image"></div>
</header>
<body>
<div id = "contentOneContainer">Container one</div>
<div id = "contentTwoContainer">Container two</div>
</body>
and the css
html, body{
padding: 0;
margin: 0;
}
#navContainer{
position: fixed;
z-index: 0;
width: 100%;
background-color: black;
color: white;
height: 100px;
text-align: center;
}
#backgroundImage{
position: fixed;
z-index: -2;
}
#backgroundImage img{
width: 100%;
max-width: 2560px;
}
#contentOneContainer{
width: 100%;
height: 500px;
background-color: blue;
position: relative;
top: 417px;
z-index: 0;
color: white;
}
#contentTwoContainer{
width: 100%;
height: 250px;
background-color: gray;
position: relative;
top: 417px;
z-index: 0;
color: white;
}
/*----------------------------------*\
Responsive
\*----------------------------------*/
#media (min-width: 757px){
#contentOneContainer{
background-color: red;
}
}
If you adjust the screen size, at 757px I have the background color of the container switch. Basically, on my desktop, I am lining up the bottom of the image with the top of the first container. When viewed on my iphone 6s (I don't know how to make this work when viewing the fiddle on mobile) the bottom of the image and the top of the container are a hundred plus pixels apart. I hope this helps a little. Also, sorry if my code blows.
Add viewport meta tag in the head section for the media queries to work on mobile.
http://getbootstrap.com/css/#overview-mobile
I'm trying to make an image responsive, and have the text also be responsive, but align in a relative manner so it matches up and doesn't ruin the output.
This is my html:
.checks {
position: relative;
display: inline-block;
height: auto;
max-width: 50%;
}
.competitive {
position: absolute;
display: inline-block;
bottom: 80%;
font-family: 'museo_slab500';
font-size: 150%;
color: #fff;
padding: 0 20px;
width: 50;
line-height: 150%;
}
<div class="checks">
<img src="http://jqlconsulting.com/wp-content/uploads/2015/06/forcheckmarks2-Converted.png" alt="" style="max- width:100%"/>
<h2 class="competitive"><span>3 Tiered Quality Review Process</h2></span>
</div>
What am I doing wrong?
You can make image responsive by using '%' like 100% or etc.
But you can't do same with text to make it responsive.
You need to use units like 'em' or 'rem' instead of '%' or 'px' to make text responsive.
And btw 16px = 1em or 1rem. For more info search further about css units 'rem' and 'em'.
So you should use:
font-size: 1rem;
//or
font-size = 1em;
.competitive {
position: absolute; // use relative instead of absolute to make class'competitive' relative to parent.
display: inline-block;
bottom: 80%;
font-family: 'museo_slab500';
font-size: 3em; // Or use 'rem' to make text responsive.
color: #fff;
padding: 0 20px;
width: 50;
line-height: 150%;
}
I made this jsfiddle example to demonstrate your problem as I understand it. Since your question is too vague to understand, this might not be the solution you want. Also, this is not a full answer, just something to get you started.
I think what you want is to keep the text 3 Tiered Quality Review Process to keep on the top maroon image even if the window size is changed.
Alert me if you dont want this solution. And please change your question too for other users to understand it properly.
The answer as your see in the jsfiddle is this javascript which resizes your competitive container to your checks div.
window.onresize = resizeText;
function resizeText()
{
var heightPercentage = 10; //Make the height 10% of parent
var widthPercentage = 100; //Make the width 100% of parent i.e. full width
var parentHeight = $(".checks").height();
var parentWidth = $(".checks").width();
$(".competitive").css("height", parentHeight * (heightPercentage / 100) + "px");
$(".competitive").css("width", parentWidth * (widthPercentage / 100) + "px");
}
Then I included a bunch of these lines #media all and (min-width: 50px) { body { font-size:5px; } } in your css to adjust the font-size based on the window size. You can play around with this and add more of these to cover all possible cases. Note this depends on how much is your window's max and min height/width.
Also check this answer which closely relates to your problem (IMO)
I also suggest strongly to use bootstrap for any responsive css.
.checks {
position: relative;
display: inline-block;
height: auto;
max-width: 50%;
}
.competitive {
position: absolute;
display: inline-block;
bottom: 80%;
font-family: 'museo_slab500';
font-size: 150%;
color: #fff;
padding: 0 20px;
width: 50;
line-height: 150%;
}
<div class="checks">
<img src="http://jqlconsulting.com/wp-content/uploads/2015/06/forcheckmarks2-Converted.png" alt="" style="max- width:100%"/>
<h2 class="competitive"><span>3 Tiered Quality Review Process</h2></span>
</div>
There is probably a relentlessly simple solution to this but I've been chasing my tail for a while so I've come to ask those wiser and smarter than me.
I've got a website for a personal project I'm making which displays images within a lightbox. See image:
The header area (red) is fixed height.
I want the images (yellow) to sit within a light box (green) which also has a caption. Crucially the images displayed need to retain their aspect ratio, 5:4, and fill the remaining height left below the header (bar a small margin top and bottom).
There's probably a really simple, elegant solution out there but I've not found it.
Any help gratefully received.
EDIT ---
Here's a fiddle of what I'm trying to do: http://jsfiddle.net/qh2V8/
Even this isn't right as I've had to put a fixed width in to even try and get it to work.
CSS:
#header{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 145px;
background-color: #F00;
}
#overlayBg {
position: fixed;
top: 155px;
bottom: 20px;
padding: 8px;
padding-bottom: 30px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
background: #FF0;
width: 400px;
}
#overlayContainer img {
position: relative;
height: 100%;
width: 100%;
}
#overlayBg p {
position: relative;
padding-top: 8px;
padding-bottom: 10px;
font-family: 'Josefin Sans', sans-serif;
font-weight: 600;
font-size: 14px;
}
HTML:
<div id="header"></div>
<div id="overlayBg">
<div id="overlayContainer">
<img src="http://i.imgur.com/u9VIg60.jpg" />
</div>
<p>Caption</p>
</div>
The image size need to be set through scripting, unless the images are a fixed constant size. The following link is of good help to your problem: Change image size with JavaScript
I'm pretty sure that you can get the original size of the image through yourImg.Style.Height and yourImg.Style.Width, and then make the calculations required to make it a 5:4 picture..
Here's where I got to.
There are fixed ratio solutions if you are basing the size of the element on width, using :before and padding-top. There's a good write up here.
There is a fixed ratio solution if you are basing the size of the element on height, however the height must be a % of the height of the screen. Written up here in another Stackoverflow question:
Resize a Div Based on Height but Retain Aspect Ratio (almost got it) Strange Reload bug
If you have a fixed pixel size header or footer and need an element to expand to fill the exact size remaining you can't do it with just HTML and CSS.
Here's a codepen.io of where I got to:
http://codepen.io/niazipan/pen/ydkGt
JS to set the image height, and CSS to style everything else around it. Code below:
HTML
<div id="overlayBg">
<div id="overlayContainer">
<img src="http://i.imgur.com/u9VIg60.jpg" id="yourImgId" />
</div>
<p>Caption</p>
</div>
CSS
html, body {
height: 100%;
text-align: center;
}
#header{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: #F00;
}
#overlayBg {
position: fixed;
top: 55px;
padding: 8px;
margin-left: auto;
margin-right: auto;
background: #FF0;
position: relative;
text-align: left;
}
#overlayContainer {
height: 100% !important;
width: 100%;
}
#overlayBg p {
font-family: 'Josefin Sans', sans-serif;
font-weight: 600;
font-size: 14px;
margin-top: 5px;
margin-bottom: 5px;
}
JS
var size = window.innerHeight - 120;
document.getElementById('yourImgId').style.height = size + 'px';
document.getElementById('overlayBg').style.width = size * 1.25 +'px';
SO,
I've created a four-column fluid-width layout for a site, and I'm working on placing a fluid square DIV within one of my columns. There are a few techniques I've found to achieve this - namely, setting padding-bottom to the same percentage as the width - but none of these seem to work when the DIV contains content.
Is there a way to maintain a 1:1 (square) ratio on a fluid DIV when that DIV contains content?
Here's my HTML:
<div id="leftmostcolumn">
<div id="logo"></div>
</div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="rightmostcolumn"></div>
And my CSS:
body {
width: 100%;
height: 100%;
background-color: red;
}
#leftmostcolumn {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
background-color: blue;
}
#leftcolumn {
position: absolute;
top: 0;
left: 25%;
width: 25%;
height: 100%;
background-color: green;
}
#rightcolumn {
position: absolute;
top: 0;
left: 50%;
width: 25%;
height: 100%;
background-color: yellow;
}
#rightmostcolumn {
position: absolute;
top: 0;
left: 75%;
width: 25%;
height: 100%;
background-color: gray;
}
#logo {
width:100%;
padding-bottom:100%;
background-color: #aa2d2d;
color: white;
}
And here's a JsFiddle.
The DIV "logo" is the one I'm trying to maintain as a square. Right now, I've used the padding-bottom approach but that doesn't do the trick when there's content in the DIV. Any input is greatly appreciated!
Marca
EDIT:
Getting there...I'm adapting a script I found to find the width of the DIV and then apply that value to the height to keep it a square. However, as it stands now the script doesn't constantly resize the DIV, and it won't allow it to shrink below a certain size. Any thoughts on how to correct either of these issues?
HTML:
<div id="box"></div>
CSS:
#box { width: 75%; height: 50px; background-color: black; }
JQUERY:
$("#box").css("height", function() {
return $(this).width();
});
JsFiddle is here.
This is something I've actually been messing around with for a while, and have come up with a quasi (but not entirely) hacky, CSS-only solution that seems to work on most browsers in the past decade. The trick is to use images, and positioning in a tricky fashion. Consider the following (simplification) of your code.
Markup:
<div class="sqr_box">
your content goes here!
</div>
CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
border: solid 2px pink;
background-color: grey;
color: white;
}
Now, we can't set the height in terms of percent, so we won't; instead, first we'll go into Photoshop, and make an image that is 2x2 px, transparent, or background-colored. Next we'll add the following to your markup:
<div class="sqr_box">
<img src="images/sizers/2x2.png" class="sizer">
<div class="content">your content goes here!</div>
</div>
and THIS to your CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
position: relative; /* static positioning is less than ideal for this scenario */
}
.sqr_box > img.sizer
{
display: block; /* images default to an inline-block like thing */
width: 100%;
height: auto; /* CLUTCH!!! this ensures that the image's height changes to maintain proportions with it's width */
visibility: hidden;
}
.sqr_box > .content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Our parent element now has a dynamically assigned height, this will work */
border: solid 2px pink;
background-color: grey;
color: white;
}
Best of all, this will work for any sized ratio of box you'd want! Just change the proportions of the image!
Hope this is all still relevant to you, 3 months later.
-Sandy
Put all four columns in one div. set that div to 100% width and set the font size to 100em
Have each of your four columns have a width of 25em instead of 25%
Have your logo width and height set to 25em each