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;
}
}
Related
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) { ... }
Use default Blogger template, named Simple. That because let me edit more template. But responsive design is poor. Only on mobile small screen the text can be readable easy. I tried to add media-queries, but I'm not experience in CSS. Below you have code that I tried apply, but unsuccessfully.
EDIT:
We have succeeded add some code that works pretty well. I need your help to improve code already published by me, but also to add sidebar to adjust or may not display.
For sidebar, class was that: fauxcolumn.
My template code is here: http://hostcode.sourceforge.net/view/3075
/**************************************************************************/
/*********************RESPONSIVE MEDIA-QUERIES*****************************/
/**************************************************************************/
/* Laptops and Desktops */
#media (min-width : 1025px) and (max-width : 1280px) {
/* The following css will be rendered if device width is less than 1280px */
}
/* Tablets (Landscape) */
#media (min-width : 769px) and (max-width : 1024px) {
/* The following css will be rendered if device width is less than 1024px */
body {
position: relative;
aling:center;
margin: 0 0px 0 -25% !important;
width: auto;
text-align: left;
padding-right: 0px;
}
.post-body {
position: relative;
margin: 0 0px 0 0px !important;
width: 75%;
text-align: left;
padding-left: 0px;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
}
}
/* Tablets (Portrait) */
#media (min-width : 641px) and (max-width : 768px) {
/* The following css will be rendered if device width is less than 768px */
body {
position: relative;
aling:center;
margin: 0 0px 0 -35% !important;
width: auto;
text-align: left;
padding-left: 0px;
}
.post-body {
position: relative;
margin: 0 0px 0 25px !important;
width: 60%;
text-align: left;
padding-left: 0px;
}
}
/* iPhones */
#media (min-width : 481px) and (max-width : 640px) {
/* The following css will be rendered if device width is less than 640xpx */
body {
position: relative;
aling:center;
margin: 0 0px 0 -300px !important;
width: auto;
text-align: left;
padding-left: 0px;
}
.post-body {
position: relative;
margin: 0 200px 0 0px !important;
width: 55%;
text-align: left;
padding-left: 0px;
}
}
/* Mobiles */
#media only screen and (max-width : 480px) {
/* The following css will be rendered if device width is less than 480px */
}
/* Small Mobiles */
#media only screen and (max-width : 320px) {
/* The following css will be rendered if device width is less than 320px */
}
/**************************************************************************/
/*****************************END RESPONSIVE*******************************/
/**************************************************************************/
Thanks a lot for any help!
Blogger has a responsive template called "Contempo" which has media queries already in place. You might want to give it a try. I am using it in my travel blog. The SEO is broken (like in most of the blogger templates), but I fixed those issues as well and you can get the fixes from my GitHub (sorry, no links, you have to dig them out by yourself as some "experts" here are editing posts removing all links).
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 */
}
Our company website was built with WordPress + Forest theme.
To get a full width blog, we had to remove the sidebar from the relevant templates and add the following custom CSS:
blog .site-content, .single .site-content { width: 70%; max-width: 70%; margin: auto; }
This works fine on desktop and most of other devices and screen sizes.
However, the display is not very nice on smartphones, because of too big margins on both sides.
So, we tried to implement the following custom CSS to fix that, but it did not seem to alter the display on smartphones:
#media (min-width: 992px) .blog .site-content, .single .site-content { width: 90%; max-width: 90%; margin: auto; }
Any idea of what is wrong here and how to fix it?
Thanks.
If you wanted smaller margins on smaller displays, it should have been
#media (max-width: 992px) {
.blog .site-content, .single .site-content {
width: 90%; max-width: 90%; margin: auto;
}
}
Your #media code is missing some curly braces ({ and }), and you need to use max-width, not min-width. I typically add #media handheld to my mobile CSS as well.
#media (max-width: 992px),
#media handheld {
.blog .site-content, .single .site-content {
width: 90%; max-width: 90%; margin: auto;
}
}
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;" />