I have an css issue about one plugin on responsive view and I want to hide on mobile. I want to use another plugin only for mobile view. How can I do that?
You can use media query for hiding element on desktop and mobile
#media only screen and (max-width: 767px) and (min-width: 200px) {
.container_mobikle{
display:block !important;
}
}
Related
I've got website: https://romeo24.live/ and there I've got a social plugin on the right top corner. On the desktop is ok, but I wanted to hide it on mobile devices. Should I make it with css? Is it possible? Thanks
You can use #media CSS at-rule for control style sheet in some screens (like mobile devices). In your site, you can use this CSS code for example:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#sfsi_floater {
display: none;
}
}
I am using foundation css 5 to build a web application and it is wqorking perfect in tablet and desktop view. But when coming to mobile view it is not catching CSS properties which I have defined manually.
I checked in media queries and saw that CSS for mobile view is in #media only screen { }
If I want to add the same property to mobile view, do I need to add below code in #media only screen {}??
.mentoring-bg-color {
background-color: #003B5D;
color: #C9C9C7;
}
above is working for desktop and tablet view OR large and medium view.
According to Foundation 5 media Queries
/* max-width 640px, mobile-only styles, use when QAing mobile issues */
#media only screen and (max-width: 40em) {
.mentoring-bg-color {
background-color: #003B5D;
color: #C9C9C7;
}
}
The css mentoring-bg-color is apply only for mobile view.
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 want to have 2 sidebars on my site. I have a responsive CSS using viewport. But I don't want to show sidebars when the site is opened in mobile browsers. Tab would do fine. Is there some way I can do so?
For example: Stack Overflow. When you open it in mobile, you don't see the sidebars. I want something similar like this.
You can use media query for this mobile only define :
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Read this for more http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can use media-queries and selectively show/hide the sidebar (change the sidebar class as applicable in the below code) like:
#media only screen and (max-width: 480px) {
.sidebar {
display: none;
}
}
Stack Overflow has a custom HTML for mobile pages.
But you could try Bootstrap
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
}