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;
}
}
Related
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;
}
}
I'm using a Joomla template which adapts to diferent screen sizes. When the screen has no enough width the "main menu" changes to the mobile version. This works fine on mobile phones and small tablets, but on big resolution tablets like the ipad mini, the main menu won't change to the mobile version.
My aim is to always display the mobile version of the menu, no matter how big is the screen of the device.
I believe that what I need to change is this line on the css file:
#media screen and (max-width: 750px){
I tried changing 750px to 1080px but nothing happens. I even changed 750px to 10px and the website behaves the same.
All #media queries:
/* MOBILE ONLY CALLS
----------------------------------------------------------- */
#media screen and (max-width: 750px){
/* VERY SMALL CSS
----------------------------------------------------------- */
#media screen and (max-width: 240px){
/* Retina Display Images */
#media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
The original css file: http://www.mediafire.com/view/s4ng67ng6m4g4f9/s5_responsive_bars.css
There would be some class to hide the main menu and show the mobile like .main-menu { display: none; } .mobile-menu { display: block; }.
You have to find that, put it outside of media queries and remove all menu class instances from media queries.
Hope this helps
I'm trying to develope a mobile theme based on a Wordpress site.
The question is not about Wordpress but, why my CSS code appear in a way on, e.g. my GNexus (i tried also with a Windows Phone), but quite different on an iPad, always in portrait mode.
In particular i'm trying to create an horizontal nav menu that contains these menu voices:
MENU (a collapsed voice that contains all pages)
SEARCH FORM (a search form displayed at the center of the nav bar)
A LANGUAGE SELECTOR (aligned to the right side of the nav bar, with its own arrow to show other languages available)
I've copied my code here: http://jsfiddle.net/S26zx/
I'm using, also, this media query:
#media only screen and (orientation : portrait) {
/* MY CSS CODE */
}
These are differences between two version: http://i.imgur.com/frvvKzj.png
So, why iPad displays sub voices like "Menu" is already clicked, and why that sub-voices are shown in horizontal?
Thanks in advance for the help!
Set your CSS for different layouts.
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
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
}