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.
Related
I have a footer container. There are some menu items and two paddels(left and right) to scroll left and right the menu. There are one description text and one log link.
Now, if the screen size is more than 768px then all these three divs( menu, description text, log link) are in same line. Which is fine. But, if i choose screen size less than <768px then as per my application design will be like this below.
< Menu >
Description text Log link
Here is the screenshot for less than <768 px.
Now, description text and log link aren't in same line . Because of repair log width, menu inner wrapper is hided behind the screen. How to solve this?
Here is my css style for less than (768 px screen)
#media only screen and (min-width: 414px) and (max-width: 767px) {
.footerContainer {
height: 72px;
flex-direction: column;
.menu_item_outer_wrapper {
width: 390px !important;
height: 100%;
.paddles {
display: block;
.left-paddle {
transform: translate(-1%, -45%);
}
.right-paddle {
right:0;
transform: translate(10%, -45%);
}
}
.menu_item_inner_wrapper {
margin-left: 36px;
}
}
.footer-desc_log-section {
width: 100%;
.footer__description {
width: 60%;
margin-left: 8px;
}
.footer__description,
.footer__audit-log {
line-height: 32px;
}
}
.footer-desc_log-section {
width: 100% !important;
height: 100%;
}
}
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
div{
display:inline;
}
}
.div2{
float:right;
}
<body>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<body/>
You can check out this code just add display:inline; in the CSS of the div.
Hello am having troubles to make this responsive mosaic, what I am trying to acomplish here is to keep the same order of the 7 images and if the screen is smaller make the mosaic full width but with their respective proportions in a mobile screen but maintaining the order.
this is my css:
#mosaic {
width: 100%;
background-color: aqua;
}
.largeImg, .smallImg {
/*display: inline-block;*/
float: left;
}
.largeImg {
/*width: 40%;*/
background-color: #165384;
}
.smallImg {
/*width: 60%;*/
background-color: #EF0808;
}
.col-wrap {
display: inline-block;
}
this is my demo: jsfiddle demo
Hope someone can help and thanks for reading.
You can achieve your desired functionality using media queries, the code below is specific for mobile devices, try it on;
#media all and (max-width: 658px) { // mobile devices
#mosaic {
display:block; // to have each musaic in one line
}
}
I have a web page and menu made with element at the bottom of it (inside some DIVs):
.nav {
position: relative;
margin: 2px 0;}}
On smaller screens Id'd like to move menu to the top of the page.
I've added to CSS:
#media screen and (max-width: 600px) {
.nav {
position:fixed, top:0px;
left:0px;
min-height: 40px;
}
and tried different settings for the position tag (top, absolute, ...) to no avail.
Please help.
try this:
#media screen and (max-width: 600px) {
.nav {
position:fixed;
top:0px;
left:0px;
min-height: 40px;
}
instead of:
#media screen and (max-width: 600px) {
.nav {
position:fixed, top:0px;
left:0px;
min-height: 40px;
}
You always end a css line with a ; and than you can enter the following line. You don't end a line with a , like you did after position:fixed;
and remove the second } in your first rule;
.nav {
position: relative;
margin: 2px 0;
} /*one } and not two*/
I also have a small tip. I don't know what browser you are using but user the webconsole (F12 for the most browser). If you made a mistake it will be visible there.
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;
}
}
all i am new here and i was trying to make responsive header image and to some extent i have done with using this "dislay none "technique
#img1{
display:block;
}
#img2{
display:none;
}
#media screen and (max-width:480px){
#img1{
display:none;
}
#img2{
display:block;
}
}
so this is the technique that i am using but it doesn't maintain the qualtiy what i think so can you please tell to make a header image responsive that is shorter than this method
thanks in advance
Why not use background images?
.header {
background: url(img1.jpg);
width: 100%;
height: 200px;
}
#media screen and (min-width: 768px) {
.header {
background: url(img2.jpg);
}
}