I am struggling with a website regarding media queries. I have this code snippet as part of my menu
.flexnav.flexnav-show {
margin-top: 52px; } line 513 in my css
and with a media query set at #media all and (min-width: 800px) I have this code snippet for my tablet.
.flexnav.flexnav-show {
margin-top: 0px; } on line 638 in my css
However, when viewing the page on a tablet the margin-top is still set at 52px.
I have a similar issue with a another media query. I have this following code snippet
#media only screen and (min-width: 481px)
header hgroup {
top: 12%;
}
For my desktop I have the following:
#media only screen and (min-width: 769px)
header hgroup {
top:15%;
} at line 462
When on the desktop the top is still 12%
This is the link to the website.
Thanks
-Sohail
You need to use "max-width"
EXAMPLE:
/* DEFAULT */
.some-div{top:30%;}
/* RESPONSIVE */
#media screen and (max-width: 769px){
.some-div{ top:15%;}
}
#media screen and (max-width: 481px){
.some-div{ top: 12%;}
}
Sometimes you can use "!important" to rewrite the previous state in CSS but is not necessarily.
Related
I am trying to use media queries to affix text to the bottom of a background image on a second page. When I edit the padding-top it affects the content on desktop mode, even if I adjust the media query to (max-width: 500px) and keep the desktop above 500px (which should then be outside the parameters of the media query, right?), but it has no bearing on mobile views. This is what I think the code should be, and it looks fine on desktop but leaves a large gap on mobile.
#media screen and (min-width: 500px) {}
.site-boxed-container .site-content {
max-width: 100%;
padding-top: 50%;
}
I also tried adding the following code to force mobile to have no top padding, but again it had no effect on mobile:
#media screen and (min-width: 250px) and (max-width: 499px)
.site-boxed-container .site-content{
padding-top: 0%;
}
Neither of the snippets of code you have shown are legal CSS.
The first:
#media screen and (min-width: 500px) {}
.site-boxed-container .site-content {
max-width: 100%;
padding-top: 50%;
}
does nothing. You have given the media query nothing to do - there is a matched pair of curly brackets immediately after the query. So everything will have the same padding-top.
The second:
#media screen and (min-width: 250px) and (max-width: 499px)
.site-boxed-container .site-content{
padding-top: 0%;
}
has a syntax error, there is no opening curly bracket immediately after the media query. Everything that pertains to a media query must come within curly brackets.
The correct syntax for this would be:
#media screen and (min-width: 250px) and (max-width: 499px) {
.site-boxed-container .site-content{
padding-top: 0%;
}
}
assuming you want to make padding top zero for viewports with widths between 250px and 499px.
I've been tasked with developing a wordpress site for my company with almost 0 web development experience. I've been fiddling with CSS a bit and I've come up with this steaming pile of trash.
Anyways, I only need to develop it for 3 resolutions (Company standards). However, auto-scaling websites are complete magic to me. So I've decided to hardcode elements for each of 3 specific resolutions (1920x1080, 1440x900, 1024x768).
Here's the code:
768 Users
#media (min-width : 768px)
{
.sidebar
{
right: 115px;
bottom: 40px;
}
}
900 Users
#media only screen and (min-width : 900px) and (max-width: 900px)
{
.sidebar
{
right: 155px;
bottom: 65px;
}
}
1080 Users
#media only screen and (min-width : 1080px)
{
.sidebar
{
right: 155px;
bottom: 65px;
}
}
Diagram
Question:
The issue is, the hardcoded scaling I've done only works for
the /768 Users/ and the /1080 Users/.
Every change I make in the /900 Users/ section does nothing, how do I fix that?
In your code, (min-width : 900px) and (max-width: 900px) will only target a width of exactly 900px, which is not desirable.
One technique is to use a "mobile-first implementation" in which you start with the smallest size first and work your way up. Think of it as styling for the smallest viewports first and then adding to those styles for increasingly larger viewports.
For example:
/* start with smallest "mobile viewport" styles here, as a default */
#media (min-width : 768px) {
/* add styles for 768px and up */
}
#media (min-width : 900px) {
/* add styles for 900px and up */
}
#media (min-width : 1080px) {
/* add styles for 1080px and up */
}
You might find this article informative: An Introduction to Mobile-First Media Queries
#media only screen and (min-width : 900px) and (max-width: 900px) meaning from 900px to 900px.... so nowhere at all.
If I understand your problem correctly, this should work:
#media only screen and (min-width : 900px) and (max-width: 1080px)
Your going to use CSS3 media queries to essentially define each viewport you are supporting; and from within write your styles per. There a few ways to call this - but I've found the below the simplest to test starting out... You will also have to make sure your meta viewport tag from within the HTML doc is properly defined.
#media (max-width:900px) and (min-width:400px) {
.foo {
display:none;
}
}
On my shop page on tablets and phones in landscape mode, not all products are shown next to each other. They leave gaps, so sometimes there are two products and sometimes just one product in a row. I tried around with CSS and couldn't find a solution. My goal is to have them all next to each other and display a minimum of 2 in a row on portrait phones, instead of one. How can I do this?
Here's my site: https://malimo.co/shop/
If you open the website on a computer screen, just make the browser window smaller and you will see it)
You set width of products to 50% + margin. That is more than width of screen.
On landscape you have this
#media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3:nth-child(3n) {
margin-right: 15px;
}
change it to 0px
or change 50% to lower value. For example 46%.
#media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3 {
width: calc(50% - 7.5px);
}
i think you should set margin-right to 10
#media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3 {`
width: calc(45% - 7.5px);
}
i think this will sort the issue. set margin-right to 0
#media (max-width: 992px) and (min-width: 768px)
{
.theme__product__item--col__3:nth-child(3n) {
margin-right: 0;
}
}
I have a drop-down menu for mobile units that's working fine, I have also set up a media query for tablets where the code is slightly different. Its this part of the code that not showing up at all when on tablet screen widths.
The default for the menu drop-down is set at margin-top: 52px; on line 524 in style-sheet.
For the tablet I have set up the following code:
#media only screen and (min-width: 481px) {
.flexnav-show {
margin-top: 0px; }
}
on line 630 in style-sheet. This part of the code is never implemented at all.
This is the website I am trying to make it work on.
Thanks,
Sohail
Try to use min-device-width
#media all and (min-device-width: 481px) {
.flexnav-show {
margin-top: 0px; }
}
I am very keen to use media queries in my CSS but i am confused to how to use it. I have stand
my queries requirement is
if screen width is 100 to 480 then different style comes,
if screen width 481 to 600 then different style comes,
if screen width 601 to 800 then different style comes,
if screen width 801 then default CSS should work.
.class { /* default style */ }
#media (min-width: 100px) and (max-width: 480px) {
.class { /* style */ }
}
#media (min-width: 481px) and (max-width: 600px) {
.class { /* style */ }
}
#media (min-width: 601px) and (max-width: 800px) {
.class { /* style */ }
}
The basic relies on using this kind of queries:
#media (min-width: 768px) and (max-width: 979px) {
/*here goes the exact changes you need to make in order to make
your site pretty on this range.*/
}
Please remember that when using responsive web design you should use percentages when possible also em for fonts.
media queries are now available for IE.
take a look in http://caniuse.com/#feat=css-mediaqueries when you can use them.
A polyfil I been using with good results is response.js
I believe something along the lines of:
#media screen and (min-width: 100px) and (max-width: 480px)
{
/* Change main container '.wrapper' */
.wrapper
{
width: 100px;
}
}
#media screen and (min-width: 480px) and (max-width: 600px)
{
.wrapper
{
width: 480px;
}
}
..etc