I am designing a responsive web site. For that web site i am using a div "two". "Two" css is
#two {
overflow:hidden;
min-height: 85px;
margin-left: 22%;
}
and responsive css is like fallows
#media screen and (max-width: 400px) {
#two{
//empty field
}
}
when decreasing the browser window, normal css is loading instead of "media screen and (max-width: 400px)"
That's behaving as it should be, you have a definition for the ID 2, then if the width is less than 400 pixels you have a second empty definition. So imagine taking out your media clause and you just have this.
#two {
overflow:hidden;
min-height: 85px;
margin-left: 22%;
}
#two{
//empty field
}
That's what CSS is active when you have a screen with less than 400 pixels, you could wrap your first definition in an media query to only apply if the screen is larger than 400 pixels, or override each property you set in the first #two block, in the second one inside the media query.
Related
I have a web project, how do I make the images on my website responsive in any display? Will this is my code is produce an error?
html code
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
css code
#media screen and (max-width: 750px) {
.img-load {
width: 100%;
height: auto;
}
}
You have a few options when it comes to making your image responsive.
With the current settings you have of width: 100% and height: auto, your image is already responsive without the media query.
Your image is not longer responsive if you start using px as a unit of measure for your height and width.
You do haven't need to #media, if you want image width to cover the entire page width, in any device. only:
HTML:
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
CSS:
.img-load{
width:100%;
}
You must use #media, only when you want your image to have different widths in any device.
For example, if you want the width of an image to be 50% on the large screen, and 100% on the smaller screen, you can set:
CSS:
.img-load{
height: auto;
}
#media screen and (max-width: 750px) {
.img-load{
width:100%;
}
}
#media screen and (max-width: 1200px) {
.img-load{
width:50%;
}
}
Here is a link to the codepen for the code that I am working on. I am trying to get it so that if the device width is less than 540px, the width of the wrapper goes from 33.33% to 100%, however it doesn't seem to be doing so.
My media query is as follows:
#media only screen and (max-width: 540px) {
#wrapper {
width: 100%;
}
}
My normal css for the wrapper is as follows:
#wrapper {
width: 33.3%;
margin: 0 auto;
position: relative;
}
You have to put that media query BELOW the other rules in the stylesheet. The way you have it now (i.e. media query at the beginning of your stylesheet) it's overwritten by the general rule (containing width: 33.3%;) which follows below it.
https://codepen.io/anon/pen/GyPRVG
I know this is a simple fix, but I am clueless on how to actually fix the problem. It's weird. On the desktop version, my logo is smaller than I want it to be because on the mobile it gets way too big.
Here is my css code:
#logo{
height:380%;
margin-top: -35px;
}
And here is my meta tag for other devices:
<meta name="viewport" content="width=device-width, initial-scale=1">
I also researched a bit and saw that I need an #media? Also here is the picture:
Here is my full css code as requested:
.navbar-text pull-left{
color:#000000;
text-decoration:none;
}
.navbar-text p{
color:inherit;
text-decoration:none;
}
.navbar{
border: 0px;
}
#logo{
height:500%;
margin-top: -35px;
}
#media only screen and (min-width: 640px) {
#logo {
height:150%; // Change this value
margin-top: -35px;
}
}
You can implement the equivalent of max-font-size with media queries
The idea is relatively simple.
You set the font size to 20vw - read about vw here - since it's
a logo.
you overwrite the font-size with a fixed size once the viewer size
exceeds a certain point - 450px in my example below.
The end result is that your font will adjust to the screen size and will be responsive.
Working example:
#logo {
font-size: 20vw;
text-align: center;
}
#media screen and (min-width: 450px) {
#logo {
font-size: 83px;
}
}
<div id="logo">"Quotin"</div>
Edit:
I just realized your logo is an image.
I trimmed the extra empty space off your logo in Photoshop because that's a lot easier than messing with negative margins in this case.
This should work on both mobile and desktop screens and be responsive without needing media queries
Working Example:
#logo {
margin: 0 auto;
max-width: 100%;
width: auto;
height: auto;
display: block;
}
<a class="navbar-brand" href="http://www.quotin.co"><img class="img-responsive" id="logo" src="https://image.ibb.co/dTt4xv/8DL1n.png"></a>
I would replace 380% by a size in either pixel or rem.
Mobile screens have nowadays very high pixel density. Here is a good example on how to make a responsive logo https://getflywheel.com/layout/css-sprites-make-your-logo-responsive/
CSS3 Media Query is what you should be looking for. Assuming that your desired mobile width is 640px, put the following in your CSS to display it differently on mobile view.
#media (min-width: 640px) {
#logo {
height:150%; // Change this value to adjust logo size
margin-top: -35px; // Change this value to vertically move your logo.
}
}
Your code is all good. Just change min-width to max-width, and you're all set.
#media only screen and (max-width: 640px) {
#logo { height: 150%; };
}
Right now, what you are saying is:
#logo { height: 500%; } - Give the logo a height of 500%.
#media ..(min-width: 640px) {#logo {height: 150%;} } - If the screen size is at minimum 640px wide (or wider...), let the height be 150%.
I'm surprised nobody noticed this before.
I give my div elements sizes in % because I want them to be able to adapt to different screen sizes of different devices. I however want the size to be constant for a device. For example if a div is 60% in width of my laptop browser screen it should stay 60% even when I minimize size of my browser window.
How do I achieve this?
You are probally looking for
min-width: 800px;
If the width gets under 800px now the div wont resize smaller and just stay at this width.
Just make sure you add a media query like this:
div{
width: 60%;
}
#media (min-width: 601px) {
div{
min-width: 800px;
}
}
#media (max-width: 600px) {
div{
min-width: 400px;
}
}
Using % you can make the div adaptive, but inside side the div if there any image or fixed width elements it will not be adaptive, you need to make them adaptive using media queries
ex:
/* Small Mobile Devices ( < 768px ) Style Begin */
#media (min-width: 0px) and (max-width: 767px) {
.div-elements-name {
width:100%;
}
}
I want to make sure a HTML element (in this case an input box) maintains the 'optimal' width on different screen resolutions.
My subjective rules (for simplicity: ignoring the need for margins):
Initially set the width of the element to 40% of the window width
If the size of the element drops below a certain width (eg. 200 pixels), keep that minimum width
If the element won't fit on screen (in this example: window width is smaller then 200 pixels), set the width of the element to the window width
Can this be achieved using pure CSS (and still support IE8)?
As others have said, you can use media queries, here is a working example for your requirements.
input {
width:40%;
min-width:200px;
}
#media (max-width: 200px) {
input {
width:100%;
min-width: 0;
}
}
http://jsfiddle.net/bEvUZ/
.input_box {
width: 40%;
}
#media (max-width:500px) { /* 40% of 500px is 200px */
.input_box {
width: 200px;
}
}
#media (max-width:200px) { /* full width when the screen is smaller than 200 px */
.input_box {
width: 100%;
}
}
EDIT: Working example here http://jsfiddle.net/PXYRN/ and https://code.google.com/p/css3-mediaqueries-js/ for IE8 Support
Yes,
There are multiple ways to do that.
You can use media queries, flexboxes, and also play with box-sizing.
In your case, media queries are exactly what you need.
It's called "Responsive design".
Ex :
#media screen and (max-width: 640px) {
.bloc {
width : 40%;
}
}
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/