I am trying here to add a different background image for every single page as soon you visit the website on mobile (Tablet and Smartphones).
As you can see, I am using Wordpress and fullPage.js
I tried this in CSS, but without any result:
/* ----------- iPhone 4 and 4S ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
#beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) !important; }
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
#media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
#beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) !important; }
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
#beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) !important; }
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
#beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) !important; }
}
Any tips would be appreciated.
Change your min-device-width to min-width, that should do the trick. See this for more info!
Checkout that you have not closed quotes - "
#beste-lage { background-image: url("http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png); }
should be:
#beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) }
The background isn't on #beste-lage but on .bt-op-item-content.
Related
Hi I wrote media query to have responsive view of navbar in ipad. My media query is not working.
.nav-tabs>li>a {
color: #2b2b2b;
font-size: 13px;
line-height: 26px;
padding: 4px 12px;
outline: none;
margin-left: 50px;
position: relative;
display: block;
}
#media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
.nav-tabs>li>a {
color: #2b2b2b;
font-size: 13px;
line-height: 26px;
padding: 4px 12px;
outline: none;
position: relative;
display: block;
}
}
Any suggestions why it is not working?
device-width and device-height are both deprecated media features, you should use max(/min)-device-width and max(/min)-device-height instead.
You can check the list of available media features here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Chris Coyier at CSS-tricks wrote a really good - slightly outdated - reference for almost all devices. The code below relates to I-pads and how to specifically target them with CSS.
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* -- style goes here -- */
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
/* -- style goes here -- */
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
/* -- style goes here -- */
}
When i am taking min-width:368px; in desktop mode it is working but after that as i am using media queries and i am converting it to max-width:368px (for mobile and tablet) and it is not working.It is taking min-width value not max-width value. Why?.
Example:
min-width: 368px;(desktop );
max-width: 368px;(mobile, tablet);
try this :
#media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
#media screen and (max-device-width: 640px) and (orientation:landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
#media screen and (max-device-width: 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
#media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 5 Portrait or Landscape #### */
#media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 6 and 6 plus Portrait or Landscape #### */
#media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
/* #### Desktops #### */
#media screen and (min-width: 1024px){
/* some CSS here */
}
I've finally worked my website on mobile phones, landscape and portrait, but I still am not being able to work it on tablets!
I've used media queries to make my website work on mobile phones, here's what I did:
#media screen and (max-width: 1024px) {
body{
position: relative;
left: 100px;
}
.pintro{
position: relative;
top: 180px;
width: 500px;
}
.hintro{
position: relative;
top: 180px;
}
/* The rest of my code */
}
#media screen and (max-width: 1024px) and (max-height: 400px) {
body{
font-family: 'Noto Sans', sans-serif;
background: url("nature-blur-tree-greenex.jpg") no-repeat center center fixed;
width: 100%;
max-width: 900px;
margin: 0 auto;
position: relative;
right: 8%;
}
.pintro{
position: relative;
line-height: 50px;
left: -100px;
}
/* The rest of my code */
}
I then tried doing that with tablets, in this form:
#media only screen and (min-device-width: 768px){
.footer{
position: reltive;
top: 1000px;
}
}
But, that didn't work. I would be very grateful if someone provided me with a media query which I can put in my CSS for my site to work on tablets.
Thanks.
try using this codepen
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPhone 6 landscape */
#media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 Plus landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 Plus portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 and 6 Plus */
#media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
/* Apple Watch */
#media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }
I'm trying to allow a container that holds five images per row to change the size of it's width if the browser width is smaller than the five images, including the margins etc.
I've added the following media query, and all works well when browsing on a desktop computer (resizing browser to less than 1080px in width)...The container changes width and the content is centered.
However, when browsing on mobile device (iPhone 4 and S4) it doesn't work. Thoughts?
CSS
.main-width {
margin: 20px auto;
max-width: 1080px;
min-width: 960px;
}
#media screen and (max-width: 1080px) {
.main-width {
max-width: 870px !important;
min-width: 870px !important;
}
}
This is likely because you don't have a viewport set.
Place the following meta tag in the <head> element of your document.
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information, read "Using the viewport meta tag to control layout on mobile browsers " - (mdn)
You can use (max-device-width:1080px) instead. It passes viewport and applys on device width.
Give this a try this is a modified one that I use:
/* Media queries */
/* Desktop Resolutions */
/* 2k */
#media screen and (max-width: 2048px) {
}
/* 1080 HD */
#media screen and (max-width: 1920px) {
}
/* Wide SXGA/ Apple Powerbook G4 */
#media screen and (max-width: 1440px) {
}
/* HDTV 720p/1080i monitors */
#media only screen and (max-width: 1366px) {
}
#media only screen and (max-width: 1024px) {
}
#media only screen and (max-width: 768px) {
}
#media only screen and (max-width: 480px) {
}
#media only screen and (max-width: 320px) {
}
/* Device Width & Density */
/* iPad Mini */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}
/* iPad 2 and 3 Landscape */
#media (max-device-width: 1024px) and (orientation: landscape) {
}
/* iPad 2 and 3 Portrait */
#media (max-device-width: 768px) and (orientation: portrait) {
}
/* iPad 4 */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone 4 */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
/* iPhone 5 */
#media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
}
/* HTC One */
#media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
/* Samsung Galaxy S2 */
#media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5) {
}
/* Samsung Galaxy S3 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
}
/* Samsung Galaxy S4 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
I'm trying to allow a container that holds five images per row to change the size of it's width if the browser width is smaller than the five images, including the margins etc.
I've added the following media query, and all works well when browsing on a desktop computer (resizing browser to less than 1080px in width)...The container changes width and the content is centered.
However, when browsing on mobile device (iPhone 4 and S4) it doesn't work. Thoughts?
CSS
.main-width {
margin: 20px auto;
max-width: 1080px;
min-width: 960px;
}
#media screen and (max-width: 1080px) {
.main-width {
max-width: 870px !important;
min-width: 870px !important;
}
}
This is likely because you don't have a viewport set.
Place the following meta tag in the <head> element of your document.
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information, read "Using the viewport meta tag to control layout on mobile browsers " - (mdn)
You can use (max-device-width:1080px) instead. It passes viewport and applys on device width.
Give this a try this is a modified one that I use:
/* Media queries */
/* Desktop Resolutions */
/* 2k */
#media screen and (max-width: 2048px) {
}
/* 1080 HD */
#media screen and (max-width: 1920px) {
}
/* Wide SXGA/ Apple Powerbook G4 */
#media screen and (max-width: 1440px) {
}
/* HDTV 720p/1080i monitors */
#media only screen and (max-width: 1366px) {
}
#media only screen and (max-width: 1024px) {
}
#media only screen and (max-width: 768px) {
}
#media only screen and (max-width: 480px) {
}
#media only screen and (max-width: 320px) {
}
/* Device Width & Density */
/* iPad Mini */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}
/* iPad 2 and 3 Landscape */
#media (max-device-width: 1024px) and (orientation: landscape) {
}
/* iPad 2 and 3 Portrait */
#media (max-device-width: 768px) and (orientation: portrait) {
}
/* iPad 4 */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone 4 */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
/* iPhone 5 */
#media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
}
/* HTC One */
#media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
/* Samsung Galaxy S2 */
#media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5) {
}
/* Samsung Galaxy S3 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
}
/* Samsung Galaxy S4 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}