Im trying to make my website responsive but when i try and change the css styles for the different sizes some of them are not working and im not sure why.
I have styled my website and then used the following line and it works perfectly fine when the size of the screen reaches 1680
#media only screen and (max-width: 1680) {
css style...
}
but when i try and do it for the next size it doesn't resize:
#media only screen and (max-width: 1366) {
Everything that i put in here doesn't work
}
Am i doing something wrong here?
Are they supposed to be in the same class or does it not matter as long as i link the class to the html document?
It looks like you forgot the "px".
Generally speaking, you may want to define a range, such as:
#media screen and (min-width: 1366px) and (max-width: 1680px) {
}
As-is, any css you have in the 1366px media query should display between 0px and 1366px.
You had been forgotten to put px after your number.
#media only screen and (max-width: 1680px) {
css style...
}
Related
I am trying to manipulate the view when the screen is less than 600px.
for some reason, it does not work for this width, it only works for higher width.
*For testing purposes when the screen is less than 600px I am trying to hide the entire body.
Here is my code:
https://codepen.io/eyalankri/pen/qzbdVm
if you change this:
#media (max-width: 600px) {
body{display: none}
}
To This:
#media (max-width: 1000px) {
body{display: none}
}
It will work.
Can someone help me understand why it does not work for 600px ?
Thanks.
I have a website. The page width is perfect in 15.6 laptops.
But when it comes to larger displays, it gets ruined. Can you please help?
any #media styles to be added?
Thanks
It seems you have written that CSS specially for your screen's resolution. To fix that you need to use media queries. Example:
#media (min-width: 1280px) {
width: 1120px;
}
I checked and you have a similar problem on smaller screens. You would like to apply a mobile-first strategy, so the layout looks good on all screens. Apply the same strategy (media queries) to set diffences sizes for different resolutions. The most common solution is to use 3 breakpoints. Example:
#media (min-width: 768px) { }
#media (min-width: 1280px) { }
#media (min-width: 1440px) { }
The CSS that you write inside those media-queries will target different screen sizes, but also the CSS in the smallest media-query will work in the next ones if it is not overrriden.
Please give width by % value if you give that in px it will change for different
I have made a homepage for my fathers birthday. When changing screen size or using his ipad the header is collapsing on a header. If you try to change screen size on test.virumfarveogtapet.dk, you can see exactly what i mean.
Any suggestions?
Looks like a CSS media query error. Try adding this CSS rule.
#media all and (max-width: 1026px) and (min-width: 767px){
.elementor-element.elementor-element-6fcfdccd.elementor-widget.elementor-widget-heading {
margin-top: 90px;
}
}
I'm trying to create a responsive design using Twitter bootstrap. Everything is going well but I cannot figure out how to set a minimum width for desktop users.
When a user is on a desktop I don't want them to be able to shrink the browser to the point where they see responsive features meant for the phone (e.g. the navbar mobile button). I would rather just have a horizontal scroll bar when the browser gets too small. How can I get this functionality without affecting the mobile layout?
You can address this with a media-query. The only problem is that you have to set a fixed width for this, min-width doesn't seem to work in this case (tested in Firefox and Chrome). If this is fine for you, you can try the following example:
// Should be something > 1024
#media only screen and (min-device-width: 1300px) {
body {
width: 1300px;
}
}
To replicate the way that logicvault.com have their site working you would need to change the Bootstrap CSS so that you only have one media query which kicks in at 480px.
Here's the media query they have set:
#media only screen and (max-width: 480px){
// styles here
}
I was able to achieve this functionality by using Frederic's advice:
// Should be something > 1024
#media only screen and (min-device-width: 1024px) {
body {
min-width: 1025px;
}
}
However, I also needed to adjust the bootstrap responsive files so the styles were only applied to touch devices. I ended up including Modernizr on my page and looking for the touch class.
E.g. change:
#media (min-width: 768px) and (max-width: 979px) {
// Styles are here
}
to:
#media (device-min-width: 768px) and (device-max-width: 979px) {
.touch {
// Styles go here
}
new to css3 media queries and responsive design.
I would like to know how to show something (say a div) on small screens only but not on large screens.
I've tried something like:
#media (max-width: 480px) {
.show-on-small-only{ display:block; visibility:visible;}
}
...
and anything larger has eg:
#media (max-width: 768px) {
.show-on-small-only{ display:hidden; visibility:none;}
}
it doesn't seem to work as intended.
might be worth pointing out that i'm using bootstrap 2.0
It's a better practice to make all your default style mobile-friendly and then use min- media queries to size up:
div { /*put whatever your default styles are first*/ }
/* Then use the media query to hide it at 481 and wider */
#media all and (min-width:481px) {
div { display:none }
}
Look at 320andup and Skeleton and the CSS of this page for examples. Look at the helper classes towards the bottom of this CSS for differences between invisible/hidden etc.
You can put this first
/* for small screens, only execute in if statement */
#media only screen and (min-width : 320px) and (max-width : 768px) {
.smallOnly {
visibility:visible!important;
display:block!important;
}}
Then at the bottom of it put it for large screens (always execute since not in if statement)
.smallOnly {
visibility: none;
display: none;}
The important tg makes it so that anything with important always overwrite everything else and it will be the master rule regardless of where it is in the file.