I am trying to setup a basic responsive wordpress theme. To start, I grabbed the toolbox theme from wordpress.org and added twitter bootstrap responsive css/js.
I added some basic test styles, just to reduce the padding on smaller screens and change the color to indicate that its working. For some reason, the styles for landscape phones are not working.
You can view my site here.
My responsive CSS code:
/* Large desktop */
#media (min-width: 1200px) {
body {
padding-left: 50px;
padding-right: 50px;
color: green;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 1199px) {
body {
padding-left: 30px;
padding-right: 30px;
color: purple;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
color: blue;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
body {
padding-left: 5px;
padding-right: 5px;
color: red;
}
}
It looks like you haven't set the meta tag for viewport properly:
It should be like below:
<meta name="viewport" content="width=device-width; maximum-scale=1; minimum-scale=1;" />
Related
I've had no issues with any media queries until I tried creating one for large desktop monitors. For some reason only some of the styles in the large device media query work and some don't. It seems the general styles are overriding only some of the large media query, I just don't know why.
I assumed it was in the wrong order and was being overridden, but no matter where I put it (above general styles, below smallest query, above big query), nothing changes. I then saw a suggestion that it needed more specificity, so I tried doing that as well as !important. Still nothing changes. I've checked for misplaced ; and { } but it's all correct.
These are my media queries in order:
General styles not in media query
/* styles that work */
#media only screen and (min-width: 2560px){ /* styles that HALF work */ }
#media only screen and (max-width: 1275px){ /* styles that work */ }
#media only screen and (max-width: 750px) { /* styles that work */ }
#media only screen and (max-width: 600px) { /* styles that work */ }
#media only screen and (max-width: 375px) { /* styles that work */ }
UPDATE: Code sample
PS: Idk who's downvoting everything but it isn't me.
/* General styles that all work */
body {
font-size: 1.8rem;
}
h2{
font-size: 4rem;
}
h3{
font-size: 3rem;
}
.profilePic {
width: 30rem;
height: 30rem;
text-align: center;
border-radius: 50%;
border: var(--primary) 5px solid;
padding: 1%;
}
.typingEffect h1, .typingEffect p {
font-size: 4.5rem;
padding: 0.5rem;
font-weight: bold;
letter-spacing: 0.1rem;
text-align: center;
overflow: hidden;
}
/* Large device media query where some work */
#media only screen and (min-width: 2560px){
body{
font-size: 4rem; /* Works */
}
h2{
font-size: 9rem; /* Works */
}
h3{
font-size: 5rem; /* Works */
}
.profilePic {
width: 100rem; /* Doesn't work */
height: 100rem; /* Doesn't work */
}
.typingEffect h1, .typingEffect p {
font-size: 10.5rem; /* WORKS FOR h1, NOT FOR p */
padding: 5rem; /* WORKS FOR h1, NOT FOR p */
}
}
<header>
<img class="profilePic" src= "./images/orange-Avatar3.svg" alt="Avatar of me"/>
<div class="typingEffect">
<h1 class="name"> Hey, I'm Me</h1>
<p class="tagline"><span className="typed-text"></span><span class="cursor"> </span></p>
</div>
</header>
Ok buddy, I highly recommend going to the Mobile-first design. in order to avoid using max-width. Since order matters and you may end overruling some of the properties you wrote. Check this example out.
div>header>h1 {
font-size: 40px;
color: orange;
}
#media only screen and (min-width: 2560px) {
div>header>h1 {
font-size: 150px;
color: blueviolet;
}
}
#media only screen and (max-width: 1275px) {
div>header>h1 {
font-size: 100px;
color: brown;
}
}
#media only screen and (max-width: 750px) {
div>header>h1 {
font-size: 75px;
color: yellowgreen;
}
}
#media only screen and (max-width: 600px) {
div>header>h1 {
font-size: 50px;
color: coral;
}
}
#media only screen and (max-width: 375px) {
div>header>h1 {
font-size: 125px;
color: red;
}
}
<div class="container">
<header class="">
<h1 class=""> Using Animation! </h1>
</header>
</div>
As you can see every single query is working. But if you swap out the order problems will start to occur therefore you should always be careful when using max-width so you don't end up messing up your code.
Check out this snippet where I messed up the order.
div>header>h1 {
font-size: 40px;
color: orange;
}
#media only screen and (min-width: 2560px) {
div>header>h1 {
font-size: 150px;
color: blueviolet;
}
}
#media only screen and (max-width: 600px) {
div>header>h1 {
font-size: 50px;
color: coral;
}
}
#media only screen and (max-width: 375px) {
div>header>h1 {
font-size: 125px;
color: tomato;
}
}
#media only screen and (max-width: 1275px) {
div>header>h1 {
font-size: 100px;
color: brown;
}
}
#media only screen and (max-width: 750px) {
div>header>h1 {
font-size: 75px;
color: yellowgreen;
}
}
<div class="container">
<header class="">
<h1 class=""> Using Animation! </h1>
</header>
</div>
In the above snippet, the following query didn't even work
#media only screen and (max-width: 600px) {
div>header>h1 {
font-size: 50px;
color: coral;
}
}
#media only screen and (max-width: 375px) {
div>header>h1 {
font-size: 125px;
color: tomato;
}
}
!! Since the code at the bottom is stronger in CSS you will find out the 750px breakpoint is working since it's at the bottom.
#media only screen and (max-width: 750px)
and it is overruling the breakpoints 600px and 375px since they appeared before the 750px breakpoint which is at the bottom of the CSS file.
#media only screen and (max-width: 600px)
#media only screen and (max-width: 375px)
**
I'm sure that your problem is just a CSS Specificity problem
**
That's why the best approach is to go mobile-first and use min-width since it is easier to care for and maintain. I hope my answer has given you a clear understanding of your problem and why your media were not working.
Use max-width instead of min-width for consistency
#media only screen and (max-width: 2560px){ /* styles that HALF work */ }
#media only screen and (max-width: 1275px){ /* styles that work */ }
#media only screen and (max-width: 750px) { /* styles that work */ }
#media only screen and (max-width: 600px) { /* styles that work */ }
#media only screen and (max-width: 375px) { /* styles that work */ }
use min-width instead max-width
when using max-width to this way css media query can't understand your query
When your page is 600px, it is compatible with almost all media queries
bestway:
/* styles that work */
#media only screen and (min-width: 1275px){ /* styles that HALF work */ }
#media only screen and (min-width: 751px){ /* styles that work */ }
#media only screen and (min-width: 601px) { /* styles that work */ }
#media only screen and (min-width: 376px) { /* styles that work */ }
#media only screen and (max-width: 375px) { /* styles that work */ }
I have a clickable icon image in the header of my web page; I want to hide the icon image when the page is pulled up on a desktop, laptop, and/or any larger screens. However, I want the icon to show when the page is pulled up on a mobile device/ phones and hand-held tablets.
This is what I tried:
#media screen and (min-width: 0px) and (max-width: 700px) {
.ghost {
margin-left: 500px;
/*show the icon on smaller screen*/
}
}
#media screen and (min-width: 701px) and (max-width: 1024px) {
.ghost {
margin-left: 500px;
display: none;
/*hide the icon on larger screens*/
visibility: hidden;
}
}
/* Adding this so the demo is visible even though the image link is broken. --editor */
.ghost img { border: 1px solid blue; }
<div style="cursor:pointer;" onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
...could I get some help with this please? ...thanks
Hi
If you want to display icon JUST on <= 700px devices your code should look like this below. Setting min-width: 0px in first #media and max-width: 1024px in second is unnecessary.
#media screen and (max-width: 700px) {
.ghost {
margin-left: 500px;
}
}
#media screen and (min-width: 701px) {
.ghost {
margin-left: 500px;
display: none; /* Acts like this item isn't there at all */
visibility: hidden; /* Doesn't show the item, but saves space for it */
}
}
I don't know your full issue, but if you want to act like it isn't there on large screens this CSS below will be better ;)
.ghost {
display: none;
}
#media screen and (max-width: 700px) {
.ghost {
margin-left: 500px;
display: initial;
}
}
More info about media queries you can find e.g. on this W3Schools site.
Cheers
Try this
You have to write only one media query. Like this
#media only screen and (min-width: 767px) {}. It for mobile devices.
.ghost {
display: block; /* default it will show in mobile devices. */
}
#media only screen and (min-width: 767px) {
.ghost {
display: none; /* it will hide larger than 765px eg: laptop and desktop */
}
}
<div style="cursor:pointer;" onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
The standard resolution for desktops is 1024px.
For tablets, it is 768px and for mobile it is 320px;
So to hide the image for desktops and above, you could do the following:
.ghost {
cursor: pointer;
}
#media (min-width: 1024px) {
.ghost {
display: none;
}
}
<div onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
I have a website with avada wprdpress theme. I´ve added a custom css in "Custom CSS" from theme options. This working fine for desktops, but didn´t work for mobile resolutions.
Example:
/* Portrait and Landscape */
#media only screen and (min-device-width: 320px) and (max-device-width: 640px){
.fusion-alignleft{
max-width: 80%;
float:left;
}
.fusion-alignright{
max-width: 20%;
float:right;
}
.fusion-contact-info {
padding: 1em 0px;
line-height: 1.5em;
}
.fusion-body .fusion-mobile-menu-design-modern .fusion-secondary-header .fusion-alignright{
text-align: right;
}
}
How to add responsive styles in avada wordpress theme options?
In CSS media there's a difference between device-width and width resolution. You can read more on this here: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
That said, try this...
#media all and (min-width: 320px) and (max-width: 640px) {
.fusion-alignleft {
max-width: 80%;
float:left;
}
.fusion-alignright {
max-width: 20%;
float:right;
}
.fusion-contact-info {
padding: 1em 0px;
line-height: 1.5em;
}
.fusion-body .fusion-mobile-menu-design-modern .fusion-secondary-header .fusion-alignright {
text-align: right;
}
}
I'm currently building a small website including RWD features to enable it to work well on mobile devices.
My media queries seem to work correctly in portrait mode. However, when I rotate the devices the rules don't seem to apply any more.
Portrait Mode (320x480)
Using the code:
#media only screen and (min-width: 320px) and (max-width: 480px)
The same media query renders this in
Landscape Mode (480x320)
As you can probably make out, my media queries adjust the font size depending on the width of the screen. Strangely, the font in the Landscape view does not change even though the media query applies to it too.
The full code of the media queries:
/*................................
MEDIA QUERIES - Phones
..................................*/
#media only screen and (min-width: 320px) and (max-width: 480px) {
/*............................
FONTS
..............................*/
html {
font-size: 70%;
}
p.promo {
line-height: 1.4em;
}
}
/*..............................
LAYOUT
................................*/
.clientLogo {
float: left;
height: 60px;
width: 60px;
margin: 10px 10px 10px 30px;
background: $moondust;
}
/* Phones - Landscape */
/*................................
MEDIA QUERIES - Tablets
..................................*/
#media only screen and (min-width: 481px) and (max-width: 768px) {
/*............................
FONTS
..............................*/
html {
font-size: 85%;
}
p.promo {
line-height: 1.5em;
}
/*.............................
LAYOUT
...............................*/
.clientLogo {
float: left;
height: 80px;
width: 80px;
margin: 10px 30px 10px 30px;
background: $moondust;
}
}
/*................................
MEDIA QUERIES - Desktops
..................................*/
#media only screen and (min-width: 769px) {
/*............................
FONTS
..............................*/
html {
font-size: 100%;
}
/*...............................
LAYOUT
.................................*/
.clientLogo {
float: left;
height: 120px;
width: 120px;
margin: 10px 30px 10px 30px;
background: $moondust;
}
}
Have you tried this?
#media (min-width: 480px) and (orientation: landscape) { ... }
I have the following media queries:
#media only screen and (max-width : 320px){
.jumbotron-startup{
min-height: 100vh;
height: auto;
}
.jumbotron-slide-2 p, .jumbotron-slide-2 h2{
display: none;
}
.startup-card{
height: auto;
background-color: inherit;
}
}
#media only screen and (min-width : 321px){
.jumbotron-startup{
min-height: 130vh;
height: auto;
}
.jumbotron-slide-2 p, .jumbotron-slide-2 h2{
display: none;
}
.startup-card{
height: auto;
background-color: inherit;
}
.sh-portrait{
display: inline-block;
}
#yes-startup{
margin-bottom: 10px;
}
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.jumbotron-what-is-switchhon{
min-height: 100vh;
height: auto;
}
.space-top{
margin-top: 0;
}
.jumbotron-what-is-switchhon p{
font-size: 1.2em;
text-align: center !important;
}
.jumbotron-startup img{
height: 64px;
}
.jumbotron-startup p{
font-size: 1.1em;
}
}
For some reason, these media queries, some of their classes are applying to the page on any environment, that means even if the resolution is 1920x1080 from my current monitor in my desktop computer.
I have no idea why this is happening, as it has never happened before. Anyone has any idea as to why they are acting out of context?
Outside of the media queries I'll just put some of the classes I have that for some reason, they are being overwritten:
.startup-card{
background-color: rgba(255, 255, 255, 0.6);
color: #333;
height: 300px;
border-radius: 5px;
}
.startup-card h2{
padding-top: 20px;
}
.startup-card p{
padding: 10px;
text-align: left;
font-size: 1.1em;
}
.startup-card img{
padding-top: 20px;
width: auto;
height: 90px;
}
Just to make sure we're on the same page, these media queries are at the bottom of my stylesheet, like many experts recommend, since sometimes funny things may happen if put somewhere else other than on the bottom.
EDIT
Here's a PEN for you to take a look at it. http://codepen.io/yisera/pen/xdGKh
*****UPDATE******
After commenting the media queries to see where the problem is, I found that all media queries work correctly except this one:
#media only screen and (min-width : 321px){
.jumbotron-startup{
min-height: 130vh;
height: auto;
}
.jumbotron-slide-2 p, .jumbotron-slide-2 h2{
display: none;
}
.startup-card{
height: auto;
background-color: inherit;
}
.sh-portrait{
display: inline-block;
}
#yes-startup{
margin-bottom: 10px;
}
}
I can't figure out why, it has the correct syntax and everything, everything closes correctly, it's driving me nuts
Move all your media queries at the bottom of your CSS. Otherwise the styles you have written inside the media queries will overwritten with the normal styles.
EDIT:
As OP asked in chat, "Do you know how can I elaborate a media query to target just the landscape of a mobile phone?"
/* #### Mobile Phones Portrait #### */
#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 (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}