How can I create a vertical navigation bar for smartphones and a horizontal navigation bar for desktops?
I need a navigation bar for this example: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_dropdown
You can give any element completely different styles at different screen sizes. Just use media queries:
#media (max-width: 768px /* Styles for 768px screen size and smaller */) {
.element {
background: red;
}
}
#media (min-width: 768px /* Styles for 769px screen size and larger */) {
.element {
background: blue;
}
}
Here's a helpful link: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Use media queries. With these you define a break point. Within each break point you can assign different css rules to your divs etc.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
With this example you can simply change width to 100% to get the desired effect. But do this in a media query at your required break point and that way you have two + styles depending on screen size.
example css
Related
I am trying to make a site responsive, and when it scales down, I want to cancel out the images. All my images are in HTML and I am trying to make them not show up as the screen scales down.
For this you can use media-queries.
Example:
#media screen and (max-width: 768px) {
.image-1 {
display: none;
}
}
This will not display the image when the screen size (width) is smaller than 768px.
You can learn more about media-queries here.
CSS media queries are used for this
#media only screen and (max-width: 600px) {
/* anything here will have properties mentioned here
if you want to hide all the images, use "img", else, use your specified class, such as .myImage */
img {
display: none;
}
/* OR */
.images-to-hide {
display: none;
}
}
In (max-width: 600px), you put the maximum screen width after which the styles stop working - or rather - the minimum value needed for these styles to be applied
Here's a more detailed tutorial: W3Schools.com - Media Queries
I am currently using Bootstrap v3.3.6 and jQuery v1.9.1. I have an application that will collapse a horizontal navbar once a certain screen resolution is reached. I like how this functionality works and would like to maintain the current screen resolution breakpoint. What I would like to do is also collapse the navbar when the navbar reaches a certain width. The application allows different users to have different roles which could add or remove items from the navbar dependent on the users' role.
Is there a way through CSS to collapse the navbar based on the width of the navbar? Is javascript the only option?
It does not seem possible without JavaScript. It's unclear exactly what you're trying to achieve, but you would have to use media queries in CSS to trigger events based on screen width, not individual element width.
This post: Can media queries resize based on a div element instead of the screen? covers the topic in question.
I would recommend looking at setting widths using em or vw. The latter will dynamically resize with viewport. You can then toggle display using media queries.
See: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
See: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
Using viewport width/height measures are great for font resizing but might also allow your menu width to "flow" with the resizing of your browser, then you add media query breakpoints to toggle display or set fixed values once you reach a minimum or maximum.
If you are just interested in hiding a horizontal menu bar (e.g. top nav bar) when screen gets a certain width, you can use your browser developer tools or Bootstrap documentation to identify the class name of the element, and then add additional CSS to hide the element.
Here is an example of what I'm doing on a responsive app in the works:
div.top-nav {
/* some attributes here */
}
div.bottom-nav.menu {
visibility: hidden;
}
#media only screen and (min-width: 730px) {
/* perhaps set fixed max values after screen gets beyond tablet so fonts do not get too big if resizable in huge resolution monitors */
}
#media only screen and (max-width: 991px) {
/* some fixes at some desired width as screen resizes */
}
#media only screen and (max-width: 730px) {
/* hide or change element properties for tablets */
}
#media only screen and (max-width: 500px) {
/* hide or change element properties for phones */
.top-nav-item {
display: none !important; /* hidden on phone and display bottom nav items instead below */
}
.logo {
max-height: 25px !important;
}
.avatar {
max-height: 20px !important;
max-width: 20px !important;
}
div.bottom-nav.menu {
visibility: visible;
}
div.item.bottom-nav {
font-size: 4vw;
}
}
If I check HTML on 2 different Systems with different resolutions then the view is distorted.
Is there any way of calculating the screen width and height at run time?
I lack experience with CSS but did some research and found about media queries, but there they are suggesting different classes (if i am not wrong).
My question is it possible to get the height and width at run time and use only one css ?
something like :
.view {
min-width :"some how gets computed:which device we are using ?"
min-height :"some how gets computed:which device we are using ?"
}
Media queries is a good choice for your problem.
You don't have to use different classes for these, just you have to define different behaviour based on resolution.
You can know the screen height and width by Javascript, but with CSS, I dont think that is possible. The best you can do with css is to define range of devices as in Mobiles, Tablets, Laptops, Really Large screen Devices and based on media queries you can define what a class do on certain type of device.
Have a look a below example:
/* For Mobile */
#media screen and (max-width: 540px) {
.view {
width: 400px;
}
}
/* For Tablets */
#media screen and (min-width: 540px) and (max-width: 780px) {
.view {
width: 600px;
}
}
Actual dimensions can vary as per your case.
This is the same method many framework uses to implement responsiveness.
In your example you want to set a min-width ou height, so you probably just need to use a value computed out of the screen size. If that's the case, you can use the units vw or vh, which mean 1% of screen width and 1% of screen height, respectively.
.view {
min-width: 42vw; /* Equals 42% of screen width */
min-height: 58vh; /* Equals 58% of screen width */
}
By using the calc() function you can get more sophisticated results. And to that end, you might also like to look into CSS variables. For example:
.view {
min-width: calc( 42vw - 12px );
min-height: calc( 58vmin / var(--precalculated-scaled-value) );
}
But if you need multiple rules, like changing layout, colors, fonts etc, than you need media queries. In its most basic form you'd do something like:
#media (min-width: 800px){
.class{
/* Your styling goes here */
}
}
In the example above, any styling inside the media query would kick in if the screen is at least 800px wide. (I wouldn't load different CSS files depending on the screen size, btw.)
Finally, since you used the word "resolution", I feel I must add that you can set the media queries to match screen resolutions, too. This comes in handy when serving large images. For example:
#media (min-width: 1200px),
(min-width: 600px) and (resolution: 200dpi) {
.my-image{
content: url("http://example.com/high-def-image");
}
}
That could be used to serve a higher res image as a progressive enhancement to larger screens or retina displays.
You can combine different attributes in single media query. This example will apply these styles on all screens with width at least 500px and height at least 400px:
#media all and (max-width: 500px) and (min-height: 400px) {
body {
background: #ccc;
}
.someclass {
padding: 10px;
}
}
Nope. they are not suggesting different classes.
With media queries you can set differents css rules based on screen (or media) resolution (width, height, aspect-ratio...) in a single file, or you can include different stylesheet based on the query.
I suggest you to follow a tutorial to start using media queries.
I am trying to adapt the three background images for different resolutions (mobile, tablet and computer screen in 1920 x 1080). How should I do?.enter link description here
You'll want to use media-queries in your CSS files.
You can read more about how media-query works here but the following CSS is a general guide to how you'd want to manage your queries.
/* Mobile screens */
#media (max-width: 400px) {
#background-image{
background-image: url('imageMobile.jpg');
}
}
/* Larger than phone. Tablet-sized. */
#media (min-width: 401px) {
#background-image{
background-image: url('imageTablet.jpg');
}
}
/* Desktop-sized. */
#media (min-width: 920px) {
#background-image{
background-image: url('imageDesktop.jpg');
}
}
/* Larger than Desktop HD */
#media (min-width: 1200px) {
#background-image{
background-image: url('imageHDDesktop.jpg');
}
}
Elsewhere in your CSS - not in a media-query, you would define all the other properties of your container element, and then the media-queries will choose the background-image that best fits their size.
Edit: A few years back, when media-queries were introduced, people used to use max-width exclusively. Now there is a newer responsive design approach that uses min-width instead, using the nature of CSS' 'cascade' to apply and then overwrite each successive rule until the final query is the correct one. This way, smaller devices won't have to load the media queries for devices larger than their own screen, which turns into a performance boost on older mobile devices.
I have a responsive web page that fits nicely down until 750px then it runs into trouble. It takes a lot of CSS to make it look good and it is a pretty hackish solution.
Is there a way so that if the browser size is smaller then 750px take them to a certain page with its own markup, styles etc??
Thanks,
Jordan
You can implement media queries
e.g:
#media all and (max-width: 750px) {
/* CSS rules here for screens lower than 750px */
}
#media all and (min-width: 750px) {
/* CSS rules here for screens above 750px */
}
Also see Introduction to media queries – Part 1: What are media queries - Adobe, Media queries - Wikipedia, the free encyclopedia and CSS3 Media Queries overview - CSS Media Queries
You need to Use Media Queries to get what you are looking for.
Refer the link to know more about it.
You can apply CSS to a certain device width only:
#media only screen and (max-width: 767px) {
body { background-color: red; }
}
You can easily show and hide HTML areas that target one or another device. You could even do that with the whole site, even though loading times would suffer, because all devices load the markup of all other devices.
.phone-section { display: none }
#media only screen and (max-width: 767px) {
.phone-section { display: block }
.desktop-section { display: none }
}
Here are some more examples:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
Screen Sizes:
640x480
800x600
1024x768
1280x1024 (and larger)
CSS media queries for screen sizes