Similar problem was posted but the answers there did not help me.
I have a responsive web site in which the whole background is a mp4 format video. On desktop browsers there is no problem. The code for that is below
#media screen and (min-width: 400px)
{
video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
}
And the media query for small screens is below
#media only screen and (max-width : 400px) {
background: url(../images/tanisalimmobilebackground.jpg);
background-size:cover;
video {
display:none!important;
}
}
The problem is when I view it on iOS Chrome and Safari the video is not hidden and is on the background with controls shown and not started.
What i want to do is if the width is at a max of 400 px , I want to show the jpg that is mentioned above.
I think you need to specify the element that should have the background. E.g:
#media only screen and (max-width : 400px) {
someelement{
background: url(../images/tanisalimmobilebackground.jpg);
background-size:cover;
}
video {
display:none!important;
}
}
Related
First of all, I am unable to provide any URL details as I am developing on localhost - for now. However, hopefully, with my clear description below, you may be able to provide a suggestion. :-)
I've been trying to positioning an image in the .header-wrap #header of my Wordpress site using Uplift theme. The code below has worked correctly, but the image goes below the header due to the aspect ratio which means that its height is clearly more than 160px. I have also tried background sizing and background-position - none of these provide the correct outcome.
I am aware that I need to introduce media queries, but I need to first of all get this curved image working on large screens.
I'm needing the image to sit directly under the header logo and to be positioned in the site header template so that it is scalable for all devices but adopts the sticky header so the body scrolls underneath the image.
I've provided two screenshots: first screenshot using the below code, which currently falls below the header area, and the other screenshot displays what it should look like on all screens.
The below code would work if the image wasn't so customised to a particular shape.
So, I need the image to stay fixed, so when a user scrolls up or down, the content of the page should scroll under the image.
.header-wrap #header {
background-image: url(http://localhost/lps/wp-
content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover; /*this does not produce the outcome required*/
background-position: 0 100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
}
preferred layout
The image as it currently stands using code insert
Hi you need media queries to make responsive you image background may be you have to generate different size...
.header-wrap #header {
min-width:100%;
min-height:100%;
height:100%;
width:100%;
position:fixed;
top:0px;
background-image: url(http://localhost/lps/wp-content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover; /*this does not produce the outcome required*/
background-position: 0 100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
#media all and (max-width: 1080px) {
.header-wrap #header{ left:-600px;}
}
#media all and (max-width: 980px) {
.header-wrap #header{ left:-300px;}
}
#media all and (max-width: 800px) {
.header-wrap #header{ left:-300px;}
}
#media all and (max-width: 768px) {
.header-wrap #header{ left:-300px;}
}
#media all and (max-width: 750px) {
.header-wrap #header{ left:-380px;}
}
#media all and (max-width: 640px) {
.header-wrap #header{ left:-280px;}
}
#media all and (max-width: 360px) {
.header-wrap #header{ left:-180px;}
}
#media all and (max-width: 320px) {
.header-wrap #header{ left:-160px;}
}
Now you need to adapt media queries position here for exemple but you have to adapt to the different device here a lot of them...
I've been trying to enlarge the logo of our site when viewed on mobile phone but no code seems to work. I've tried different versions of this but to no avail:
#media (max-width: 360px) {
.header-logo img {
max-width: 50%;
max-height: 50%;
}
}
I'm not sure what to adjust further since Firebug seems to be displaying code for the desktop version. And I don't really want to change anything on desktop view. Just mobile.
Will appreciate any feedback.
You can make the below changes in the css.
.header-logo img {
max-width: 100%;
max-height: auto;
}
Try this out
.header-logo img {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
At max-width of 360px change style property for class .custom-logo-link as below,
#media screen and (max-width : 360px){
.custom-logo-link {
width: 50%;
}
}
You have to specify only width, it will adjust height automatically.
.header-logo img {
width: 100%;
}
This may be a silly question, but are you sure max-width and max-height is what you want to change here? Those parameters just set the upper limit of how tall and wide the element can be.
https://www.w3schools.com/CSSref/pr_dim_max-width.asp
Perhaps try one of these?
#media (max-width: 360px) {
.header-logo img {
width: 50%;
height: 50%;
}
}
or:
#media (max-width: 360px) {
.header-logo img {
transform: scale(0.5);
}
}
I am using a bootstrap 3, have an div element with class outer and want to apply different css on mobile and computer.
For example, this is my css codes:
/* for computer */
div.outer {
height: calc(100vh - 80px);
padding: 0;
margin: 0;
min-height: 500px
}
/* for mobile */
div.outer {
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
padding: 0;
}
How do I implement it? Thanks for any suggestions.
Use media query for mobile devices. below is template, dont forgot to add mobile meta tag.
#media only screen
and (min-device-width: 320px)
and (max-device-width: 570px)
and (-webkit-min-device-pixel-ratio: 2) {
//your css for mobile is here
}
I would recommend using media queries for this one.
To change the div.outer class when in mobile use the code below.
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
div.outer {
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
padding: 0;
}
}
More media queries here
For mobile you have tp define width of the device in '#media' queries.
767px is a standard width of screen for mobile and tablets. So you can use like this
#media all and (max-width:768px){
// your css for mobile
}
This css will apply only when you device width will be 768px or less
Hello guys I am using the following code to show and hide some elements but it seems to doesn't work on mobile devices.
#media screen and (max-width: 768px) and (orientation : portrait) {
.drawer1 {
display: block;
top: 789px;
}
.drawer {
display: none;
}
.drawer1-content {
background: #fff;
background-repeat: no-repeat;
border-collapse: collapse;
height: 645px;
width: 100%;
}
}
#media screen and (min-width: 769px) {
.drawer {
bottom: 0px;
height: 700px;
overflow: hidden;
position: absolute;
width: 1024px;
z-index: 5;
}
.drawer1 {
display: block;
}
..from the code you posted, looks like you miss a } at the end..
Also check if your device has a width less than 768px in the first case
and it has a width more than 769px in the second case (landscape or portrait)
try one of the several extensions available on Chrome/Firefox/Opera to set the max width of the viewport and simulate a mobile device..
From the comment:
so from the specs: IPAD 3gen: 2048-by-1536 pixel....here you have your answer :D just change the max-width and min-width ..or just use the landscape and portrait attributes
I have a div
<div id="page">
</div>
With the following css:
#page {
background: url('images/white-zigzag.png') repeat-x;
}
#media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
I notice when I resize my browser, I see the "mobile" background (good) but if I go back and make my browser large, my previous "large" background does not always reappear.
It's an intermittent problem but it's happening often enough that I think I should address it.
Is there any way to get around this "background image not appearing" problem or a way to resize background images, so that the media query "shrinks" the background image to fit the new size? As far as I know there is no (widespread) way to change the size of a background image...
According to this test:
If you want only the desktop version of the image to be downloaded on the desktop...
and only the mobile image to be downloaded on the mobile device -
You need to use a min-width declaration to specify a minimum browser width for the desktop image...
and a max-width for the mobile image.
So your code would be:
#media (min-width: 601px) {
#page {
background: url('images/white-zigzag.png') repeat-x;
}
}
#media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
The code you provided is a little buggy which is probably a good place to start currently you have
#page {
background: url('images/white-zigzag.png') repeat-x;
}
#media (max-width: 600px) {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
The media query portion isn't complete. You still need to provide the CSS selector that you used outside of the query:
#page {
background: url('images/white-zigzag.png') repeat-x;
}
#media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
Start with that and let me know if that fixes things.
please use
#media screen and (min-width: 320px) and (max-width:580px) {
#page {
background: url('images/white-zigzag.png') repeat-x
}
}
<div style="width: 100%; height:100%;" class="bg"></div>
.bg{
background-image:url("coc.jpg");
background-repeat: no-repeat;
background-size:cover !important;
background-position: center;
overflow: hidden;
}
#media(max-width:900px){
.bg{
background-image:url("all.jpg") !important;
background-repeat: no-repeat;
background-size:cover !important;
background-position: center;
overflow: hidden;
}
}