I am running a small website on Joomla and cannot get the responsiveness to work. I am running media queries for the screen sizes and making adjustments as needed, but cannot get them to adjust for anything under 760px wide.
I've checked all four of my media queries and cannot find a solution. I'm sure it's something simple, but I cannot find it. I do
/* Note: Design for a width of 768px */
#media (min-width: 768px) and (max-width: 959px) {
.main, #jf-footer .main-inner1 {
width: 768px;
}}
/* Note: Design for a width of 480px */
#media (min-width: 480px) and (max-width: 767px) {
.main, #jf-footer .main-inner1 {
width: 444px;
}}
/* Note: Design for a width of 320px */
#media (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}}
I expect the main DIV to scale for 768px, 480px and 320px, but cannot get it to scale properly.
The website is located at:
https://crafted-development.com
My Css is located at:
https://www.crafted-development.com/templates/jf_calla-exteriors/css/template.css
You need to close the media tag also at the end with "}"
Also, instead of media, try adding "#media only screen and"
Example::
/* Note: Design for a width of 320px */
#media only screen and (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}
}
Also, the meta tag is necessary
<meta name="viewport" content="width=device-width, initial-scale=1">
Use this css
#media only screen and (min-device-width: 768px) and (max-device-width: 959px) {
.main, #jf-footer .main-inner1 {
width: 768px !important;
}
}
#media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
.main, #jf-footer .main-inner1 {
width: 444px !important;
}
}
#media only screen and (min-device-width: 320px) and (max-device-width: 479px)
{
.main, #jf-footer .main-inner1 {
width: 316px !important;
}
}
This turned out to be the solution: Thank you guys!
/* Note: Design for a width of 320px */
#media only screen and (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}
}
Related
I stuck to hide div between two screen size. like I want to hide div between screen sizes 550px - 910px with the following media query.
#media only screen and (min-width: 550px) - (max-width: 900px)
{
.bsp_big-image{
display: none !important;
}
}
use the following syntax to do it:
#media (min-width: 550px) and (max-width: 900px)
{
.bsp_big-image{
display: none !important;
}
}
I want to create a website which is responsive on mobile and desktop, but my media queries won't work (it's do nithing).
I put my link below if any body wants html and css.
my CSS:
#media screen and (min-width: 900px){
.container{
width: 30vw;
}
.show-onscreen{
display: block;
}
.hide-onscreen{
display: none;
}
}
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
#media screen and (max-width: 300px){
.container{
width: 99vw ;
}
}
and this is full code:
full code
the below query might be the issue:
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
here min-width is greater than max-width, hence it will never execute.
You can try below if that is your goal:
#media screen and (min-width: 700px) and (max-width: 900px){
.container{
width: 50vw ;
}
}
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
max-width: 700px && min-width: 900px will never be true since width cannot be less than 700 and more that 900 on the same time.
I assume you meant to set the rules to be between 700 to 900
#media screen and (max-width: 900px) and (min-width: 700px){
Switch the width values in the media query
To build and website mobile-first you should develop first for mobile and then other sizes.
You will need to use something like this:
Usage: for mobile (except smallest screens), tablet, laptop, desktop, bigscreen. Anyone over 480px
#media only screen and (min-width: 480px) {
// content
}
Usage: for tablet, laptop, desktop, bigscreen. Anyone over 768px
#media only screen and (min-width: 768px) {
// content
}
Usage: for laptop, desktop and bigscreen. Anyone over 992px
#media only screen and (min-width: 992px) {
// content
}
Usage: for desktop and bigscreen. Anyone over 1200px
#media only screen and (min-width: 1200px) {
// content
}
Usage: just for bigscreen over 1600px
#media only screen and (min-width: 1600px) {
// content
}
To use this code you can develop without set media queries until you need to change some css property for bigger screens.
I suggest you to read this article: A Hands-On Guide to Mobile-First Responsive Design
I have the following CSS to align page content within different brower sizes. However or some reason it does not like the first #media statement, in other words changing anything in there does not do anything to the layout. I use http://quirktools.com/screenfly/ to verify the layout.
Changing the sequence of the statements will mess things up as well. I am lost
Your help is greatly appreciated
Thanks
#media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
#media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
#media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
#media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE
}
First you want to define a screen size for anything larger than, from there you make your media queries for the sizes in between.
Here is an example.
/* Large desktop */
#media only screen and (min-width :75.000em) {
.test {
display: none;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :61.250em) and (max-width:74.938em) {
.test {
display: block;
color: #FF0;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :48.000em) and (max-width:61.188em) {
.test {
display: none;
}
}
/* Landscape phone to portrait tablet */
#media only screen and (min-width :30.063em) and ( max-width :47.938em) {
.test {
display: none;
}
}
/* portrait phones and down */
#media only screen and (max-width :30.000em) {
.test {
display: block;
color: #FF0;
}
}
<meta name="viewport" content="width=device-width initial-scale=1" />
Include above code into html to run media query.
You need to set your first one to say "anything smaller than (max-width: 829px), do this"
For EG:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px) and (max-width: 1025px) {
.bg {background-color:red;}
}
#media (min-width: 1026px) and (max-width: 1580px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) and (max-width: 2000px) {
.bg {background-color:yellow;}
}
See it in effect at this Plunker - I added the bg class to the body so you can see the background change color when you change the frame width.
You can simplify your queries too by saying:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px){
.bg {background-color:red;}
}
#media (min-width: 1026px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) {
.bg {background-color:yellow;}
}
I am using some media queries for responsive versions, but with the smallest screen media query it breaks the whole code.
This is the structure of my media query!
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
With the above structure, the 3rd one media query isn't good at all.
I wrote following code in my style sheet with 3rd one media query.
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title {
font-size: 25px !important;
line-height: 25px;
}
}
And this code is making title of all versions into font-size 25.
Why is this not specific only for small screens and why it's taking effect on all versions?
And also, should I use "!important" on all versions for all classes?
like:
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
.module-title: 30px !important;
}
}
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title: 30px !important;
}
}
Any idea?
Remove the !important from the non-responsive class. and make sure you're closing media queries properly.
Example:
#media (max-width: 300px {
/*styles goes here*/
.tag {
} This is tag closing
} this is query closing
This syntax is very wrong:
/* Landscape phone to portrait tablet */*1
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
...because you can't just give a property to a selector!
The *1 after the comment above the code is outside the comment.
So the problem is that and the double braces. The !important below would only break other query if any of the conditions were met in other media-queries (only screen, min-width: 321px or max-width: 479).
#media only screen and (min-width: 321px) and (max-width: 479px) {
.module-title { font-size: 27px !important; }
}
It would not influence the media-query below, for instance:
#media only print and (min-width: 480px) {
.module-title { font-size: 27px; }
}
The syntax above would be the correct one.
Seems that iPad rules overwrite iPhone4 related rules.
How can I solve this problem?
/* iPad */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
#theDiv { width: 400px; }
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
#theDiv { width: 600px; }
}
/* iPhoneRetina */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
#theDiv { width: 200px; }
}
You can bump the Retina display's pixel ratio to 2.
Here's the link to the Webkit blog post about it. Go down to the header "Conditional Inclusion".