I want to know how to size my images in #media screen and max-width:640.
My style.css:
#header-wrapper
{
position: relative;
padding: 7em 0 0;
background:url(images/fox-illustration.jpg) no-repeat center;
background-position:center;
width:auto;
height:768px;
}
My mobile.css:
#media screen and (max-width: 640px) {
header-wrapper {
width: 600px;
}
So the width is only applied to to the header-wrapper..
I also tried to give the header-wrapper in mobile.css another image
(which I sized in photoshop to mobile size).
But this didn't work either. I think because the image of the header-wrapper overwrite it in style.css?
background:url(images/fox-illustration.jpg);
background-size:600px 400px;
background-repeat:no-repeat;
Do this
First make sure your mobile.css is active.
If the second part of your code is at it is set now, you are probably missing an id tag in the css.
Try changing your
header-wrapper {
width: 600px;
}
to
#header-wrapper {
width: 600px;
}
Other than using fixed background size, you can use cover and follow the width of the #header-wrapper
#header-wrapper {
position: relative;
padding: 7em 0 0;
background:url(images/fox-illustration.jpg) no-repeat center;
background-size:cover;
width:auto;
height:768px;
}
#media screen and (max-width: 640px) {
#header-wrapper {
width: 600px;
}
}
Related
I am trying to make the overflow of an image appear to be hidden upon a certain screen size, but I cannot find the solution of why this extra spacing appears. Here is the html an css I have so far. I am trying to do this because the image would appear too small.
Bootstrap solutions are also welcome too.
.aboutsplash img{
width: 100%;
height: auto;
margin: 0;
}
#media (max-width: 769px){
.aboutsplash img{
overflow: hidden;
width: auto;
max-height: 150px;
}
}
#media (max-width: 500px){
.aboutsplash img{
position: left;
margin: 0 0 0 -25%;
}
}
<div class="aboutsplash">
<img src="images\sunsetcrop2.jpg" alt="lbl sunset">
</div>
#media (max-width: 769px){
.aboutsplash {
overflow: hidden;
}
}
try this.
I have a responsive video on my page and I've set to to adjust to a static background image when the display reaches below 767px width (for smartphones).
Problem is, that anything between 768px to 1199px (width) eg. on iPads, my video DIV container height does not respond to, causing a white margin below the video. Ideally the container should adjust from 266px - 347px (height) in parallel with the video height/width.
.videobg is my container and .videoheader is the video itself.
Here is the code:
.videobg {
margin:0;
padding:0;
width:100%;
height:100%;
position: static;
z-index: -100;
min-height: 250px;
max-height: 423px;
}
.videoheader {
margin:0;
padding:0;
width:100%;
height:100%;
}
#media (max-width: 767px) {
.videobg {
background: url('images/home/header.jpg') center center / cover no-repeat;
height:266px;
}
.videoheader {
display: none;
}
}
#media(max-width:768px){
.videobg {
height:266px;
}
}
#media (max-width: 884px) {
.videobg {
height:280px;
}
}
#media (max-width: 1000px) {
.videobg {
height:347px;
}
}
For this certain case it looks that solution will be:
.videobg {
font-size: 0px;
}
I strongly recommend using other scaling for responsive videos (e.g. like this) and, oh dear, so many media queries! :D
But, duh, if it works for you it's fine.
I have to apply height for two different screen 1080px and 1000px.
I have added following media query:
#media only screen and (max-height:1080px){
#wrapper {
width: 1884px;
height: 1080px;
float: left;
}
.filter-selection ul li
{
height:109px;
}
}
#media only screen and (max-height:1000px){
#wrapper {
width: 1884px;
height: 1000px;
float: left;
}
.filter-selection ul li
{
height:106px;
}
}
When i switched to 1080px the issues remain's same, it call's the media query for 1000px.
http://ddslauncher.com/inventory-new/
Thanks in advance.
The media queries in your example are the other way round from your question. They are:
#media only screen and (max-height:1000px){
#wrapper {
width: 1884px;
height: 1000px;
float: left;
}
.filter-selection ul li
{
height:106px;;
}
}
#media only screen and (max-height:1080px){
#wrapper {
width: 1884px;
height: 1080px;
float: left;
}
.filter-selection ul li
{
height:109px;;
}
}
(the issue here is that when the screen is below 100px in height both queries match and the second one is applied ass CSS 'cascades' down.)
instead of:
#media only screen and (max-height:1080px){
#wrapper {
width: 1884px;
height: 1080px;
float: left;
}
.filter-selection ul li
{
height:109px;
}
}
#media only screen and (max-height:1000px){
#wrapper {
width: 1884px;
height: 1000px;
float: left;
}
.filter-selection ul li
{
height:106px;
}
}
Using this second example should fix your issue.
EDIT Apologies for the formatting issues, something is interfering with my SO edits.
You can use the percentage width instead of fixed. something like the following. Also it would be great if you can run the media query based on Viewport width not height.
#media only screen and (max-height:1080px){
#wrapper {
width: 100%;
height: 1080px;
float: left;
}
}
I saw yours stylesheet. in css u have "min-height". I suggest to change into max-height, and used "!important" adnotation.
One of my questions about applying float to resizable images was answered by Gasim (thankyou) but I still have one more problem to fix.
I have two images which have this css code applied to them...
.image-container {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler2.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container {
max-width: 500px;
}
}
.image-container2 {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler3.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container2 {
max-width: 500px;
}
}
So now they're resizing correctly and aligned next to one another, I am unable to position them horizontally like my example below. I have tried the only way I know how to do this (margin-left: auto , margin-right:auto) but this didn't work. Also padding isn't working? Is there some part of this code which prevents these both from working and if so what do I need to fix it?
Any input if helpful thanks :)
Maybe this is not the best solution for responsive images, but I generally use media queries with a mobile first approach and it has been working out great. Basically, you set the boxes' widths to 100% by default and on larger screens you set the width that you want:
.image-container {
float: left;
width: 100%;
background-size: cover;
background-position: center center;
background-color: red; /* for testing */
height: 250px;
}
#media only screen and (min-width : 1224px) {
.image-container {
max-width: 500px;
}
}
Here is the result: http://codepen.io/gasim/pen/xbYQdd
Try to make the window size smaller and you will see the difference. It is much simpler to test, debug, and modify this code.
EDIT: Forgot to mention. If you can also use display: inline-block instead of floats.
EDIT 2: To add padding between containers you need to add margin to a specific value, not auto. For example:
.image-container {
/* rest of the values */
margin: 5px;
}
This will add 5px margin to left, right, top, and bottom of the image container. If you want to have center the image containers also, I would add them in another container:
<div class="container">
<div class="image-container" style="background-image: url(URL_HERE);"></div>
<div class="image-container" style="background-image: url(URL_HERE);"></div>
</div>
and add the styles:
#media only screen and (min-width: 1224px) {
.container {
width: 80%;
margin: 0 auto;
}
}
Also, please check out the way I added the background images, using styles. It is much cleaner than writing CSS for each background image. That way you can have one class image-container and just add as many background-images without relying on CSS.
I have this styling to an elenemt:
.width {
width: 1024px !important;
margin: 0 auto;
}
I want to disable the "width" completely OR change it to this:
#media (max-width: 1280px){
.width {
min-width: 100% !important;
}
When I run it like this, although I switch the screen resolution, it still uses the global style.
I prefer disabling it though.
Thanks.
To disable the width then do
#media (max-width: 1280px){
.width {
width: auto !important;
}
}
I would suggest removing the !important from both places
.width {
width: 1024px;
margin: 0 auto;
}
#media (max-width: 1280px){
.width {
width: auto;
}
}
In your original code, there is a missing } not sure if it is a typo or not
If you want min-width then do, assuming you removed the !important. But you can just set width: 100% and there is no need to do min-width
#media (max-width: 1280px){
.width {
width: auto;
min-width: 100%;
}
}
Check this in a browser and resize the window to see the changes... hope this help you!!!
The HTML
<div class="width">test</div>
The CSS
.width{
width:100%;
border:1px solid red;
margin:0 auto;
}
#media only screen and (min-width:1024px){
.width{
width:1024px;
border:1px solid blue;
}
}