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;
}
}
Related
I am attempting to write the front-end of a basic logon form for a website. I am a novice web developer and have run into some problems when designing the mobile version of the website. You can find the source code to my website here and an image of the form on my website here.
The website is designed to only display the UI when the screen width is greater than 1024px or when the screen width is less than 1024px and the device is in a portrait orientation. This is intentional, and when these specifications are not met this is displayed.
However, when I am in portrait mode and I click on the form, this is momentarily displayed. It quickly disappears however, and I'm pretty sure this is because once the webpage displays the "unsupported screen size" page, the form no longer exists on the webpage. This makes the keyboard slide down and the page go back to normal. To solve this issue, I referred here, but the webpage still did not work.
I then tried to remove the "unsupported screen size" page (this source code can be found here), but then this results when I click on the form. I'm pretty sure this is because I've set the height of html and body to 100%.
Ideally, I'd like to produce a webpage which retains the "unsupported screen size" page when the screen size truly is unsupported (or is in the wrong orientation), but when the form is clicked on the mobile site, I'd like to make the original webpage not change size but make it scrollable on top of the keyboard. Again, I'm a novice (this is my first time in front-end development) and I'd appreciate any help or advice for me to resolve this problem. Thanks in advance.
When I've done simple projects and I want to hide on some type of device I will use css #media rule like the following example (resize your window to see the text change)
#media only screen and (max-width: 768px) {
.small-screen{
display:inherit;
background-color: red;
}
.large-screen {
display:none;
}
}
#media only screen and (min-width: 769px) {
.small-screen{
display:none;
}
.large-screen{
display:inherit;
background-color: blue;
}
}
<span class="small-screen">show me on a small screen</span>
<span class="large-screen">show me on a large screen</span>
i had a similar problem with a form and the keyboard on mobile. when i would press on an input field the keyboard would pop up and change the page height to be smaller than the width, which would make the landscape rules apply, even though in practice the device was in portrait.
my solution was to apply the same rules i used for portrait, for the same max width in landscape.
that would look similar to this:
#media screen and (max-device-height:900px) and (max-device-width:415px) and (orientation:portrait){portrait rules}
#media screen and (max-device-width:415px) and (orientation:landscape){portrait rules}
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 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.
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 :)
Using the supersized script http://buildinternet.com/project/supersized/ on a new site. Same thing happens with the demo site. http://buildinternet.com/project/supersized/3/core.html
When I view it through my iPhone / Android, not seeing the bottom of the site, basically unable to scroll down.
Does this have to do with the CSS or that this script does not work with ?
EDIT:
Did not know that jQuery not capable of working on mobile devices. Guess that why they came up with jQuery mobile...
The issue, as far as I can tell, has to do with the inner block having an absolute position and a height:100%. That prevents the page from scrolling.
Change the position to relative and the inner block shows up below the background.
Change the height to auto and the background does not resize.
The best compromise I've come up with is to add the following to my CSS:
#media screen and (max-device-width: 480px) {
.focus_wrapper { poxsition:relative; height:auto;}
}
The image is displayed in the background but if the foreground item is longer than the screen, the background image terminates and doesn't repeat. Sorry I don't have a better answer.