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 :)
Related
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 have made a terrible error. I have built an entire website without making it responsive. Is there any quick easy way to make the whole site responsive so when in landscape mode it all looks exactly like my website on a desktop computer? I am a designer for print but not great with websites as you can see but I really do not want to start the whole site again.
Maybe a media query to with ratios? so the whole site looks the same just smaller and fits on the screen?
Thanks in advance
Try using CSS #media Rule, and specify your styles accordingly.
You can look at plugins that help you do it. RestiveJS is an example.
http://restivejs.com
For the future: the easiest way to implement the #media rules is the usage of em instead of pixel.
http://www.w3schools.com/cssref/css_units.asp
em Relative to the font-size of the element (2em means 2 times the
size of the current font)
if you then want your website to adjust to your screensize, simply use
#media all and (max-width: 768px) { // ipad width in portrait
body {font-size: 0.7em}
}
everything is 30% smaller on devices with a screen width smaller than 769px then if you used em instead of px
So i have a bit of a predicamenyt. I have a link that displays in an iframe if viewed on computer, and in parent page if on mobile device.
If viewed on the mobile device i only want users to see the page in landscape. So, i have use the following code:
<style type="text/css">
#warning-message { display: none; }
#media only screen and (orientation:portrait){
#wrapper { display:none; }
#warning-message { display:block; }
}
#media only screen and (orientation:landscape){
#warning-message { display:none; }
}
</style>
....
<div id="wrapper">
<!-- page -->
</div>
<div id="warning-message">
please turn to landscape
</div>
However, the problem comes in because of the iframe. If viewed on a computer the warning-message div is shown, not the wrapper content, despite the fact that the computer screen is landscape. I think this is because the iframe is portrait.
Does anyone know of a way to make it so that in non-mobile devices, only the wrapper div content is displayed, not the warning message (ie effectively treat all non-mobile devices as landscape)?
I hope the question makes sense.
Thanks in advance for any help.
No, this is not possible with just CSS. Your assumption is correct that the iframe itself, if taller than wide, will also trigger the portrait orientation rules, since an iframe is essentially a sandboxed browser. You'll get the same result if you open it in a desktop browser that has 'portrait' sizing.
A workaround could be, since you're already detecting desktop/mobile browsers, to add a special GET-parameter to the URL when opening in an iframe, ie. add ?iframe=1 to the URL, and then in the code (or if need be even in JS) detect this parameter to add an extra class to your html or body elements. You can then use this extra class to extend the media query rules.
Having said that I'd heavily recommend against what you're doing right now - media queries are all about making web sites and applications more dynamic, not restrictive. Prohibiting your users from holding their device the way they want to is just going to cause complaints and irritation, unneeded if you just use the same media queries to implement an alternative layout or scale down the landscape content to fit into portrait if aspect ratio is really that important.
I use large images in most of my (Wordpress) posts. I'd like to optimize these for mobile users. I'm not sure what optimize means but I'm guessing CSS, jquery or JS switches out the larger image for a smaller one?
Are there any examples of how this should be done?
Jquery Bires will do exactly what you want.
https://github.com/ahoward/jquery.bires
I would use CSS Media Queries to serve different CSS based on screen size
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
For example
#media (max-width: 700px) { ... }
Would serve specific CSS to any device with screen below 700px