I am using twitter bootstrap 3.0. When resolution of the screen gets changed to smaller the menu changed to mobile view. I have a div contained slider with images, so I want to hide that div when my menu changed to mobile view (when screen resolution small).
I tried to apply css classes on my div visible-desktop visible-tablet but it is not working.
Is there other way I can do?
2021 update / Bootstrap 5.1
See Display property - Hiding elements
To hide an element on extra-small (portrait mobile) screen widths, use
<div class="d-none d-sm-block">
That is hidden by default (.d-none) but visible on small or larger devices.
Original 2013 answer
If you're using Bootstrap v3, they changed the responsive utility class names. See http://getbootstrap.com/css/#responsive-utilities
You probably want .hidden-xs
This was also documented in Migrating from 2.x to 3.0
Consider using media queries. Something like
#media screen and (max-width:480px) {
.mydiv {display:none}
}
You just have to apply the Bootstrap classes as seen here. You can test them there also, if you resize your browser screen you can check wich ones are active.
<div class="hidden-xs">This is the div that will hide on mobile</div>
Should only be seen in any screen bellow 768px (mobiles)
You can put in the class of that div .hidden-xs.. It's more simple. You are only telling that this div is visible on desktop and tablets, and not telling that it isn't visible in small devices.
Related
I'm building an website with reactjs and I want to achieve something like Instagram. So when a user access this website in pc they should be seeing navbar and if the user access it on Thier phone then they should be seeing bottom tab navigation and navbar should be hidden. I'm also attaching my design photo's of both desktop and mobile UI so you guys can have better idea. Also I'm not using any UI library just plain simple reactjs.
Rather than doing any other way, I would recommend you to use a media query of CSS. It will make your life easy.
You just have to instruct what part of code you want to hide.
Suppose the class of your navbar is then just put as below in media query and put CDN of bootstrap to your page.
i.e.
#media query("Size for what you want to hide navbar)(i.e. 480px or 320px)
.nav {
visibility; hidden;
}
The simplest solutions to this would be to have two versions of navbars.
a Nav, and a NavMobile.
You can use css media queries to hide/show them as per min/max screen size, this is one of the most common practices
on my website I got a navigation with many elements. The navigation is scrollable and if you hover over an element, it gets highlighted.
The Problem: If I visit my website with my iPad, while scrolling in the navigation, the element I drag on shows its hover-effect and gets highlighted. I don't want this to happen, whats a good solution for this problem?
Thanks in advance!!
I have not try this yet but you can consider this:
Add an on-scroll function to <body>, in the function, set the color of all elements in navigation list to normal color(the color when not hovered at), so that when you scroll the page on your Ipad, even you drag the element it will still not highlighted.
<body onscroll="scroll_function()">
<script>
function scroll_function(){
document.getElementByClassName("element_name").style.backgroundColor = ... (your normal color)
}
</script>
Create an CSS media query that will use custom css on devices smaller or a larger screen than x pixels
#media only screen and (max-width: 600px) {
some-element:hover{
text-decoration:none;
}
}
Hover effects are pointless on mobile devices and tablets because you do not use a mouse to hover over elements.
Use all you hover effects as such:
#media screen and (min-width: 1024px) {
/* STYLES HERE */
}
If you still use the hover effects on all media queries, when you click on elements, the hover effect will take place.
Working without your code (always good to include that in a question btw), I'm gathering that the hover effect will be entirely CSS in spite of the javascript tag in the question, if that is the case you can use media queries to resolve this by simply creating a profile for devices you don't want the hover effect to happen on.
WRT the somewhat troublesome larger resolutions on modern handhelds, here is a quite extensive list of media query resolutions for differing handheld devices which should be helpful if you were to go down the route of attempting an MQ solution.
I have a web page formatted with jQuery mobile that utilizes Owl Carousel & Photoswipe and it is giving me trouble when viewed on mobile sizes. The problem is that when viewed on a portrait sized mobile phone (IPhone 5) the one image that is displayed is off center. I noticed that there is Javascript applying inline style to the ul with the class of .owl-carousel.owl-theme which sets the display to block. If I switch this to inline while debugging the page in Mobile view with developer tools in Chrome the one image is correctly centered. If I try to hard code this into the CSS then all images are stacked on top of one another and you can only click on one image (which is incorrect behavior since there are three images in the carousel/gallery).
Does anyone know what my problem is, and how to solve it so that if viewed from a mobile device in portrait (when only one carousel image is displayed) the image is centered correctly on the page? I have other pages with similar CSS for the carousel (though not jQuery Mobile) and when viewed on a mobile device the behavior is correct, so I am stumped! Thank you for any help given!
Try this CSS
CSS
ul.owl-carousel{
padding:0;
text-align:center;
}
hope this helps..
This is how I did it. Based on Chandra Shekhar's answer, but it seems the plugin is using divs instead of ul now; also I added a mobile query.
#media only screen and (max-width: 450px) {
div.owl-carousel {
padding:0;
text-align:center;
}
}
I finagled this tutorial to work great with my .NET, C#, MVC project except that now the far-right edge of content disappears when the browser window gets any smaller than a 1080p monitor.
Here's the tutorial: http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/
Note that I didn't follow it to the T, rather I added their CSS and JS files to my Visual Studio project and created a new layout that works with it and can be applied to my other views - a great achievement for Novice me...
I'm sure there's just a CSS variable or two somewhere that I need to update to keep the right-hand edge of content from occasionally disappearing.
Here's what it looks like:
This: vs this:
Thanks!
Since you're using bootstrap, it is part of the grid system functions.
Meaning, we have xm md lg right? I will not go through all of these because it is covered in the documentation already.
Now having a class that hides something when it is on a specific window or Browser width. Is very easy, even to explain.
The one that you want is called. Responsive utilities under Bootstrap.
<div class =".visible-sm">
I am visible only for small devices.
</div>
Now .visible class will only show from a specific devices Grid.
For example
Browser width or Device width is >= 768px .visible-sm is "VISIBLE"
Browser width or Device width is >= 992px .visible-md is "VISIBLE"
Browser width or Device width is >= 1200px .visible-lg is "VISIBLE"
Take note. They will only be visible if they are on the specific width and will not show on the other width. ex .visible-md will not show on 768px and 1200px. Only on 992px.
In most cases, this is not a very easy task to use, if you want to cover a smart response.
Now we have another class which is.
<div class=".hidden-sm">
I am visible to Medium and Large, but I will then Disappear when the browser is small
</div>
I´m using zurb foundation to create a responsive website. When i resize my window the grid changes to the mobile mode, it´s normal behavior. Is there any way that when i resize the window the website stays put and the browser only adds a scrollbar?
I still need the mobile version to exist, for mobiles only, and i have already try to use min-width to set the point where the scrollbar is added.
Does any one have any idea how to do this?
EDITED
I have the folowing media query:
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {}
And in the html i have elements whith the folowing class:
small-block-grid-1 large-block-grid-3
In the css file change the media query to max-device-width to target devices only.
I hope this helps :)