I have a div that use as a PopUp to take pictures with the WebCam,
was perfect on my monitor (1366x768), but, on smaller screens, the div is
horrible
HTML:
<div id="light" class="white_content">
<a id="close_ic" href = "javascript:void(0)" onclick ="closediv()" >x</a>
<canvas id="canvas" width="500"height="375"> </canvas>
<video autoplay id="videoElement"></video>
<input type="button" value="Capturar Foto" id="save" class="cam_btn_canvas" />
</div>
CSS:
.white_content
{
display: none;
position: fixed;
top: 15%;
left: 17.5%;
width: 65%;
height: 62%;
border-style: solid;
border-width: 1px;
border-color: #474747;
background-color: white;
z-index: 1002;
overflow: auto;
border-radius: 10px;
min-height: 398px;
min-width: 657px;
}
.cam_btn_canvas
{
font-weight: bolder;
left: 46%;
top: 75%;
position: inherit;
}
#videoElement {
width: 32%;
height: 48.5%;
background-color: #666;
z-index: 1102;
left: 50%;
top: 139px;
position: inherit;
}
#canvas
{
width: 32%;
height: 48.5%;
background-color: #666;
z-index: 1102;
left: 18%;
top: 139px;
position: inherit;
}
#close_id
{
font-size: 15pt;
font-weight: bolder;
position: inherit;
left: 80%;
top: 106px;
}
I wanted to know how to make both my window and the elements inside keep the ratio even with a smaller screen
Thanks for attention!
Not answering your question directly but here are two fixes for your issue.
Media Query
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Developers use these when making their site more responsive.
Here is an example of making my container responsive.
#media (min-width: 768px) {
.container {
max-width: 730px;
}
}
Bootstrap
Bootstrap is a framework designed for creating mobile first projects on the web. Since I have been using Bootstrap, I have never once looked back. You can easily make your site responsive by using preset classes with their markup and css. It makes it so you will never really have issues like the one you are experiencing now.
Check out Bootstrap or any other Front-End framework. They are great.
you might find my jQuery plugin here useful, it will allow you to target just the popup div and set different layouts for the items within it according to how wide that div is. While you avoid script with media queries, you can only use them to change layout based on the width of the whole screen rather than the width of the container.
Related
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position:relative;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: -10px;
background-color: green;
}
.mytag {
float: left;
position: absolute;
left: 60px;
top: -10px;
background-color: green;
}
<div class="container">
<div class="tag">Featured</div>
<div class="mytag">My list</div>
<img src="http://www.placehold.it/200x200">
</div>
I'm trying to create a div on image, but i'm not able to create a responsive one.
I'm trying to create a replica of this website as i'm a beginner. I want to create the first section, which should be a responsive one (plan and design and our goal should be on the image) How can i achieve the same? check here
How to make it a responsive?
The website you have mentioned uses a background image, Here is an example of achieving it.
First create your wrapper div and then apply a background image for it. make it relatively positioned. Make the other child content boxes absolute positioned. so you can move them freely using top, left, right and bottom css acttributes within its parent
html
<div class="div-with-bg-img">
<div class="content-div">
content here
</div>
</div>
css
.div-with-bg-img {
width: 350px;
height: 150px;
background: url(http://via.placeholder.com/350x150);
margin-top: 100px;
position: relative;
}
.content-div {
width: 100px;
height: 50px;
background: tomato;
position: absolute;
top: -10px;
left: 40px;
}
if you want to make it responsive then apply relative measurement units
.div-with-bg-img {
width: 100%;
height: 150px;
background: url(http://via.placeholder.com/350x150) no-repeat;
margin-top: 100px;
position: relative;
background-size: cover;
background-position: center;
}
Use media queries to make your website responsive
Here is an example code
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
Few useful articles I found on web
List of media queries
What is RWD
If you just want to know how to make an image responsive here is a nice article published on css tricks
https://css-tricks.com/responsive-images-css/
You can use the browser dev tools to learn the website source codes :)
I have been working on a new homepage for my website, but
I can't figure out why text moves up and down when I resize
my browser.
My CSS Code:
.welcome {
width: 100%;
height: 60px;
background-color: #4CAF50;
margin-top: -4px;
}
.welcome h1 {
font-family: 'Lato', sans-serif;
color: white;
font-size: 40px;
margin-bottom: 20px;
margin-top: 5px;
margin-left: 15px;
}
.welcome p {
color: white;
overflow: hidden;
float: left;
position: relative;
top: -50em;
}
#welcome-background {
width: 100%;
height: auto;
max-height: 1000px;
margin-top: -16px;
min-height: 500px;
}
If you see any other CSS error's please let me know
My HTML:
<div class="welcome">
<h1 style="float:left;">About Us</h1>
<img id="welcome-background" style="" src="/new_homepage/img/black-bg.png">
<p style="color: white; position: relative; top: -50em;">Hardwire Studios' is a gaming community that has servers am a variety of games, such as Minecraft, Garry's Mod, Counter-Strike: Global Offensive, Rust, and many more coming in the future. We try to provide the best "Lag-Free" experience on all of our server, yet also make them as fun and enjoyable as they can be, by only using the best of the best host companies. You can also see our future plan's by simply scrolling down a little more, until you find the "Future Plan's" Section.</p>
</div>
Your paragraph uses relative positioning, which means it is still in the flow of the document. Because it comes after an image, its vertical position changes as the height of the image changes.
Instead. put the image and paragraph inside of a wrapper element that is positioned relatively, then position the paragraph with absolute positioning.
This could look something like this:
HTML:
<div id="welcome-wrapper">
<img id="welcome-background" src="...">
<p>Hardwire Studios' is...</p>
</div>
CSS:
#welcome-wrapper {
position: relative;
}
#welcome-wrapper p {
position: absolute;
top: 10em;
}
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';
When I try to use the top word in CSS on a link it does not work.
I want my links to be lower on the page so I would use top: 10%;. That does not work though because my links seem to not move no matter what. I can however get them to move sideways with text-align:center;.
My HTML
<div id="pythonfilelistfiles">
<a href="http://localhost/project1/pythonfiles-calcuator.html">
<div class="pythonfilelistboxs" id="file1">
<h1> Simple Calculator </h1>
</div>
</a>
My CSS
#pythonfilelistfiles {
width: 78%;
height: 92%;
margin-left: 20%;
margin-top: -2%;
max-width: 78%;
max-height: 92%;
overflow-y: scroll;
}
#file1 {
top: 0%;
}
.pythonfilelistboxs {
width: 96%;
height: 12%;
background-color: black;
margin-left: 2%;
z-index: 5;
position: relative;
border-radius: 8px;
border: 2px solid red;
color: red;
text-align: center;
line-height: 80%;
}
There are a number of ways you could accomplish this, most of which are probably a little more maintainable than using positioning properties -
Add padding to the top of the containing div.
Increase the line-height for those links.
Use margin-top to move it down a relative amount (you'll need to set it to display: block as well, which will change how they behave in the page flow).
It is probably easier to use a unit other than percentages in any case - it would better practice to use a type-related unit like em or rem.
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?