Google Webmaster Tools reports that this page - https://www.shlomifish.org/__Beta-kmor/meta/FAQ/about.xhtml - has a horizontal scrollbar in mobile mode. I verified its presence using Firefox's Ctrl-shift-m in 360x740 portrait mode. How can I eliminate the horizontal scrollbar there?
Note that adding main { overflow: scroll; } is a symptomatic (and not too good) fix, and I'm seeking a better solution.
( The XHTML and CSS both validate. )
main.main {
max-width: 100vw;
}
or, more specific with media query:
#media (max-width:450px) {
main.main {
max-width: 100vw;
}
}
You need to change your grid display setup on your body.
On mobile change on display block and it'll works.
#media (max-width:650px) {
body {
display:block;
}
}
Related
I'm trying to write some css that will only work in firefox, that is within a media query so it only works after 767px. Below is what I've currently written but it doesn't work.
#media only (min-width: 767px) {
#-moz-document url-prefix() {
.SearchBlock input {
width:88% !important;
}
}
}
It works just fine without the "#media only" section, but I only want it to work after 767px. Is this possible?
Edit: Changed resolution to width.
Don't use min-resolution. Use
min-width: if you need to apply CSS to the devices which are more than 767px, and use
max-width: If you need to apply CSS to the devices having size less than 767px - for mobiles
Example:
#media screen and (min-width: 767px) {
#-moz-document url-prefix() {
.SearchBlock input {
width:88% !important;
}
}
}
Hope this helps!
You are not getting the result because you are using min-resolution correctly.
You can do one of the 2 :
Either change min-resolution to min-width
Enter resolution value in min-resolution for example min-resolution(192dpi)
Px is not the unit of resolution.
Change min-resolution to min-width.
Resolution is for the pixel density of the device. width refers to the actual width which is what you want.
The url-prefix portion needs to have the url of the document the style rules refer to, such as
url-prefix("https://example.com/")
The #document CSS at-rule restricts the style rules contained within
it based on the URL of the document.
https://developer.mozilla.org/en-US/docs/Web/CSS/#document
Try this. Should work! :)
.SearchBlock input {
display: block;
width: 30%;
}
#-moz-document url-prefix() {
#media screen and (min-width: 767px) {
.SearchBlock input {
width:88% !important;
}
}
}
<div class="SearchBlock">
<input type="text" placeholder="text"/>
</div>
i have problem with this code and the problem is that before 1200px everything is OK but after re-sizing to 1200px and more ( before width of scroll bar, for example chrome scroll-bar width is 17px ) before 1218px, we will see unwanted horizontal scroll-bar annoying us.
i want to solve this problem but i don't know how.
anybody knows how? so please guide me.
link of my codes and online test:
https://codepen.io/mostafaeslami7/pen/xZePXq?editors=1100
my html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="header">
<div class="inner-header">header</div>
</div>
<div class="body">body</div>
<div class="footer">
<div class="inner-footer">footer</div>
</div>
</body>
</html>
my css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;
font-size: 30px;
text-align: center;
}
body{
background-color: orange;
}
.header{
border-bottom: 1px solid black;
}
.inner-header{
background-color: black;
}
.body{
height: 3000px;
background-color: blue;
}
.footer{
border-top: 1px solid black;
}
.inner-footer{
background-color: green;
}
.header,
.footer{
width: 100%;
height: 100px;
}
.inner-header,
.inner-footer{
height: 100%;
}
.inner-header,
.body,
.inner-footer{
width: 1000px;
margin: 0 auto;
}
#media screen and (min-width: 1200px){
.inner-header,
.body,
.inner-footer{
width: 1200px;
}
}
I know it a old question. but i had like to share this, Hopping someone will find it useful and will save someone's day.
So, There is no quick way, You will have to do some digging and find yourself the element which is causing overflow. Thus, creating unwanted horizontal scroll and pain in your ass. Normally one way would be to just write
body {
overflow-x: hidden;
}
and hope that overflow-x on body will remove that horizontal scroll bar but some times you have to apply overflow:hidden to you main container of the site. Which likely works all the time or most of the times. like,
.main_container {
overflow: hidden;
}
There are some tricks that can help you find those overflow elements such as using below JavaScript script, just open console and execute it there
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
OR you could execute jQuery one,
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
or you can use this little jquery snippet. It will logging out the elements directly in console along the elements width, which can help you to easily highlight them on hover in your console (at least in Chrome).
$.each($('*'), function() { if ($(this).width() > $('body').width()) { console.log($(this).get(0)); } }).length;
or if you still can't find that particular element use this below trick,
//Open inspector -> “New Style Rule”:
* {
outline: 1px solid red;
}
You can always add: opacity: 1 !important; visibility: visible !important; if you think you might have a hidden element but usually the above works without extra effort.
Hope it helps someone. Happy digging.
I can't really recommend it but you can use overflow-X:hidden on the body element (not the element with a class of .body*). It's not as though you need to see anything outside of the sides of your container anyway...right?
* you should really not use that name for a class, it's unnecessarily confusing.
#media screen and (min-width: 1200px) {
body {
overflow-X: hidden;
}
.inner-header,
.body,
.inner-footer {
width: 1200px;
}
}
Ideally, you should adjust the design to allow for this though. Different browsers treat the scrollbars differently when it comes to calculating the viewport width.
Codepen Demo
You can change your .inner-footer from width: 1000px to max-width: 1000px; and that will fix the issue.
Here you change code like that. overflow-x: hidden; is hidden the horizontal scroll bar.
body{
background-color: orange;
overflow-x: hidden;
overflow-y: scroll;
}
You could solve this in quite a few ways - one of which is changing your width: 1000px to max-width: 1000px
Another might be simply styling / hiding the scroll bar with some -webkit prefixes. Wouldn't recommend this route for multiple UX reasons but if you want to read up on styling scrollbars - check out this resource.
Lastly you could specifically target the x-axis scroll bar with overflow-x and remove / hide it by setting this to hidden. Again - this method is not the best. How would a user know content is off the page without the scroll bar?
i solve it very easy. if you define min-width media queries = width + scroll-bar width ( for example in chrome is 17px or in opera is 15px but for sure we say 20px ) the problem will be solve.
new link of code:
codepen.io/mostafaeslami7/pen/JGVLdK?editors=1100
I need a media query (or similar) using pure CSS, HTML or possibly LESS (as long althogh pre-compiled won't work) to apply a particular class to an ID depending on the screen height. I'm setting classes defined by Add2Any - not css properties.
jsfiddle
What I want to do is set the div #add2any to this for small screens.
<div id="add2any" class="a2a_kit a2a_default_style">
Otherwise I want this:
<div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">
Is this possible, and how?
Looking for a non-javascript/not Jquery solution to avoid time lag and having a <div> for each style and showing only the relevant one.
Background
The idea is to change the layout and size of the AddToAny bar for small screens, so instead of 32px images it displays a totally different style of compact bar, with less buttons, and using AddToAny's classes means future changes they make would not be dependent on fixed css in my stylesheets. Browser compatibility is important.
CSS so far
#media screen and (max-height: 430px) {
.a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
#add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
.a2a_divider { top:5px ; position: relative}
}
Edit
Unable to find solution from any of these, I'm using foundation framework.
conditional CSS based upon div not screen
Toggle mobile view in Foundation using CSS class or JS
How to toggle class using pure javascript in html
**Edit 2 **
Suggestions of using Less or Sass from this question seem like overkill, since the solution would be needed on every page.
Self-hosting the script and adding some javacript to it might be a better choice, the class names look certain to remain the same even if the script changes since all Customize instructions encourage direct use of AddToAny's class names.
Edited
If you have this html:
<div class="a2a_kit a2a_default_style">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
You can make a media query like this:
/* first state */
.a2a_kit { display: block; }
.a2a_kit.a2a_kit_size_32 { display: none; }
#media screen and (max-height: 430px) {
/* reverse behaviour on max-height 430 px */
.a2a_kit { display: none; }
.a2a_kit.a2a_kit_size_32 { display: block; }
}
You just need to set up modified styles in your media queries:
#add2any {
/* any styles you want to apply all the time */
background-color: blue;
width: 100px;
color: white;
}
#media (min-width: 420px) and (max-width: 760px) {
/* styles when screen is greater than 420px wide but less than 760px */
/* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
#div1 {
background-color: red;
width: 300px;
color: yellow;
}
}
#media (min-width: 760px) {
/* styles when screen is greater than 760px wide */
#div1 {
background-color: green;
width: 600px;
}
}
JSFiddle Demo
*if you don't want to style based on the ID, you can add a unique class and style that
Just as the title suggests, I am making a website that utilizes the "off canvas" menu approach to save space and modernize the look and feel of the site on mobile devices.
The exact problem is that the menu itself will not move off the canvas when the page is loaded in iOS 7 on an iPad. This is not the case in iOS 6 though, when I checked it. The flyout works perfectly on my desktop when I resize the browser window.
This is what it looks like on an iPad Air with iOS 7
I was surprised to find that the layout actually worked as expected in iOS 6 with an earlier iPad. I am racking my brains trying to figure this out. Here is the code I am working with (note: I am using the Bootstrap 3 framework underneath all of this):
HTML HEADER
<meta name="viewport" content="width=device-width, initial-scale=1.0">
GLOBAL DEVICE-RELATED CSS
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
MENU CSS
#media screen and (max-width: $screen-tablet) {
#nav {
position: absolute;
top: 0;
padding-top: 5.25em;
}
#nav .block {
position: relative;
padding: 0;
}
.js-ready #nav {
height: 100%;
width: 70%;
background: #333333;
}
.js-ready #nav .block {
background: transparent;
}
.js-ready #nav {
left: -70%;
}
.js-ready #inner-wrap {
left: 0;
}
.js-nav #inner-wrap {
left: 70%;
}
}
}
JAVASCRIPT
// Toggle the mobile navigation off-canvas menu
$(document).on('click', '.nav-btn', function(event)
{
event.preventDefault();
if ($('html').hasClass('js-nav-in'))
{
$('html').removeClass('js-nav-in').addClass('js-nav-out');
}
else if ($('html').hasClass('js-nav-out'))
{
$('html').removeClass('js-nav-out').addClass('js-nav-in');
}
});
I'm sorry for the code dump, but that seems to make this a more complex issue. Any tips or suggestions anyone has would be appreciated. I am willing to completely rebuild the menu if it means that this menu would work across the bulk of tablets and mobile phones.
As a note, when I tap on the menu icon or closing x the view zooms in as if the total width of the page is less. I think this may be a complete rebuild type situation. If you know of a resource where I would be able to see how this could be properly done, I would accept it.
EDIT: The sizing seems to work in iOS 7 Safari. However, when the user swipes to the side, the menu comes out. This is still an issue, just a different one. Any helpful resources would be appreciated.
As a test, could you change your CSS to hide the navigation (#nav {display:none;})on top of positioning it off the page. Then have your jquery .show(); and .hide(); the nav respectively when the user clicks on the menu along with your slide in/out transition.
My gut instinct is that since the nav is technically still part of the layout (it's just off to the right, presumably with overflow:hidden on the parent container), but iOS is thinking its part of the layout and is including it somehow.
So as a test, hide the nav and I'm thinking iPad iOS7 should respect it being gone and have your "page" take up the full width of the viewport (that's my theory at least).
I am looking for how to remove specific images with media queries. I am using HTML/CSS for a webpage.
Here is the code I currently have, which does not work (it was experimental):
#media (min-width:0px) and (max-width:1200px) {
LEVEL 1.png, level 6.png, http://placehold.it/160x600, http://placehold.it/100x100 {
display:none;
}
}
Any suggestions would be great, thanks.
Just give the images a class and then in the media query:
.that-class-name {
display: none;
}
Also, you should probably remove min-width: 0. I'm wondering if something less than 1200px would be better for for max-width as well. That's very wide.
Here you have to add a class inside the your media query
#media (min-width:0px) and (max-width:1200px)
.img { display: none; margin: 0 auto;} // your image class or can be img tag
}
and just now i answered the same question Here