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
Related
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...
}
I'm having a bit of trouble with my media queries.
Building a site using a purchased responsive wordpress theme, and am now customising it.
I'm running into an issue where, because of how the design behaves over a range of screen widths, I am using media queries to make adjustments whenever the design breaks.
Trouble is, various elements are breaking in different ways at different widths (not surprising).
So instead of getting a nice, exclusive range of media query sizes (eg: max-width: 480px, min-width: 481px --> max-width: 780px, min-width: 781px --> max-width: 960px, minwidth 961px) it's turning into an overlapping mess of queries.
Here is a sample of what I've got in my CSS so far, with CSS removed just to save space:
#media only screen and (max-width: 961px) {
/* upto 961px */
#media only screen and (min-width: 885px) and (max-width: 961px) {
/* 885px upto 961px */
#media only screen and (min-width: 768px) and (max-width: 884px) {
/* 768px upto 884px */
#media only screen and (min-width: 480px) and (max-width: 767px) {
/* upto 767px */
#media only screen and (max-width: 550px) {
/* Shrinks top nav text size for smaller screens*/
#media only screen and (min-width: 481px) and (max-width: 550px) {
/* Adjusts search bar location*/
#media only screen and (max-width: 565px) {
/* Toggles correct Justified Image Grid for home page buttons */
#media only screen and (min-width: 566px) and (max-width: 721px) {
/* Toggles correct Justified Image Grid for home page buttons */
#media only screen and (min-width: 722px) and (max-width: 902px) {
/* Toggles correct Justified Image Grid for home page buttons */
#media only screen and (min-width: 903px) {
/* Toggles correct Justified Image Grid for home page buttons */
Pretty messy huh? Please be nice, am still learning this stuff :)
So my main problem now is: the elements I'm controlling with the last 4 media queries (targeting the Justified Image Grid) contain very simple declarations - basically making certain elements display or not. I thought I'd defined these queries fairly exclusively, but they are not working the way I expect them to.
Is the problem possibly with my mess of other queries? (Even though the Justified Image Grid are not referenced in other queries?)
More than happy to take suggestions on how to handle queries in this kind of situation, which I'd imagine happens quite frequently with web builds...
EDIT:
Here is the link to the test page: http://dev.thecyclery.net.au/home-test/
There are two image grid elements, and I only want to display one at a time.
Thanks!
Jon
one way to simplify things a bit is to remove the min-width portions of the queries that have both a min and a max. Then while using only max-width queries you order them from largest to smallest.
#media only screen and (max-width: 961px) {
}
#media only screen and (max-width: 884px) {
}
#media only screen and (max-width: 767px) {
}
These will automatically override each other when the screen gets below each respective setting.
Personally I only use the max-width settings and adjust them accordingly, hopefully you can get away with the same thing if you set it up correctly.
One reason that you may be having trouble is that if two queries have some of the same size parameters (overlapping conditions) whichever one is located last will take precedence over the other, and this might not be your intended outcome.
(Also, my personal experience with purchased wordpress themes has been less than satisfactory, you are typically better off customizing _s or one of the twenty___ themes that come with wordpress. The trouble with purchased themes is that they are usually designed with a specific intent (or specific plugins)... an intent that is almost never the same as your own intent.)
I am failry new to bootsrap and wanted to ask, is there anyway, that when the device screen is in Portrait to always use "md" size columns, and when it is in landscape to always use "xs" columns?
Extend Bootstrap CSS using new or altered media queries. Normally leaving the original bootstrap.css file and extending it with the changes is the best way, or future upgrades will be troublesome. You might only want to recreate the grid classes you want to use, for example:
#media (min-width: 992px) and (orientation:landscape) {
.col-md-4 {
// some properties
}
}
#media (min-width: 992px) and (orientation:portrait) {
.col-md-4 {
// redefined
}
}
As mentioned by Skelly, there is no orientation switch built into Bootstrap itself at this time.
Here is my actual solution, maybe helps someone
#media (orientation: portrait){
.portrait{
width: 100%;
}
/*div[class^='col-xs'], div[class*='col-xs']{
width: 100%;
}*/
}
Two solutions:
1- is to add "portrait" class to any div that you want to see in portrait with width=100%.
2- Uncomment and use the second rule on the media that applies width:100% to any div that have a class name that starts width col-xs
As far as I know, there is no way to do this "out of the box".. Bootstrap uses media queries that are based on screen width, not orientation.
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
}
I found out my Droid has a max width of 800 pixels, which I think some lower-resolution computers are smaller than, but I want my Droid to display the mobile CSS, so I am not sure max device width is the best solution. So does anybody know how I'd design my CSS link tags so that the mobile CSS is used only by smartphones while the desktop CSS is used only by desktop computers (including the kind with a width under 800px)?
Responsive Web Design, using media-queries
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
I tried the solutions above, but they didn't work for iPad in landscape mode. The iPad Landscape is 1024 px.
So my solution was:
#media only screen and (min-width: 1025px) {
.myClass {
/*...your desktop-only style...*/
}
}
#media (pointer: fine) {
body {
background-color: red;
}
}
The gap between mobile and desktop devices is getting closer and closer -consider, for example, tablets or the recently new hybrid devices.
As Aaron points, you might want to define different rules based on device screen (min-width or max-width). Eg:
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
A different criteria you might want to use is targeting devices based on the their screen capabilities:
Touchscreen media-queries