I'm trying to hide the scrollbar from every element on my Vue + Vite app. I don't want to disable scroll, just hide it, so I'm using the following code.
*::-webkit-scrollbar {
display: none !important;
}
It works fine and the scrollbar is hidden on desktop dimensions, but it doesn't disappear on mobile, even on Chrome devtools mobile. Here's my meta if that's of any help.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I'm using a default Vue Vite app, with some vertically overflowing content.
you could try to make the scrollbar transparent:
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
You should place this code on a #media tag, so that it only affects mobile.
This solution was taken from this thread.
Related
I want to display a specific link of my flutter web app in an iframe.
Purpose:
Create multiple dynamic websites on custom domains managed with 1 flutter web app
Things I have tried:
Making iframe dynamic using javascript code, but onLoad does not trigger
iframe with 100% height and width does not work
Problem:
100% width works fine using:
<meta name="viewport" content="width=device-width, initial-scale=1">
but the height does not take up the entire space
Finally figured out how to do it.
iframe {
width: 100% !important;
min-width: 100%;
height: 100vh !important;
align-self: center;
border: 0;
}
The important thing to note was that scroll was not working when flutter web was put in iFrame in Safari.
Solution:
<script>
document.addEventListener('touchstart', {});
</script>
www.yourtechpros.co.uk/test/
If you see the content is fine on a computer but on a mobile device there is a gap to the right with no content there just a white space? i've checked over the code of the media query and all seems to be fine, can anyone assist?
Ive checked all the code over and tried to adjust all the content inside
www.yourtechpros.co.uk/test/
May I suggest adding a viewport meta tag? You will see that the entire website changes dimensions.
Add this to the head:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
More info can be found here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Extra support:
Checked your page: add the following
#media screen and (max-width: 767px) {
.callbackicon {
display: none;
}
.aboutabccleaning {
width: 100%
}
}
And change:
.frame {
width: 130%;
}
too:
.frame {
width: 100%;
}
EXTRA extra support:
If you remove the margin from .aboutabccleaning the white space will go away.
I've been running into issues where I cannot scroll all the way up or down in one swipe on mobile. I'm assuming the issue has to do with a mix of the mobile navigation I created and the url bar on the phone showing and hiding depending on if you're scrolling up or down.
Has anyone run into this issue/found a working solution for it?
The problem disappeared when I changed two rules
#media only screen and (max-width: 850px)
body, html {
min-height: 100vh;
min-width: 100vw;
}
and
html, body {
min-height: 100%;
min-width: 100%;
}
Just use min-height and min-width instead of declaring them explicitly.
Are you using a set viewport?
If you're using something like
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
It could be affecting the way your phone natively scrolls.
When my main widthfix div for my 960px wide centred site is brought into HTML5 Boilerplate it misbehaves on iPhone. In Safari on the iPhone the div extends off screen on iPhone. It works fine on my laptop screen browsers & everywhere outside of HTML5 Boilerplate.
I haven't changed anything inside HTML5 Boilerplate yet apart from add a widthfix div with the following class:
#widthfix {
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
}
...I've just worked it out it can be corrected by removing:
meta name="viewport" content="width=device-width, initial-scale=1.0"
from the head.
I don't know if this is the best solution, so if anyone has any additional input I'm all ears.
However at least it appears to display OK.
I'm playing around with media queries and started developing for a mobile screen. I have the first page relatively how I would like it, but I am getting a horizontal scroll bar at the bottom when I resize my screen to <480px. I haven't tested this on a mobile device yet but I'm assuming the same error will appear.
The site is: http://brad.sebdengroup.com/newOdynSite/index.php
To recreate error open the site, resize window to <480px and vertically scroll to the bottom
Here's the problem:
#main span.bold {
padding: 15px 20px;
...
}
#main span{
width: 100%;
...
}
This combination of CSS rules creates an element that's greater than the width of the page. Width 100% does not include any space used by padding, borders, or margins. For instance, if the page width is 480px, the width of the element will be 20px + 480px + 20px = 520px.
To avoid this, try wrapping the content in an additional tag, so that the width and padding can be applied to separate elements, and tweaking the CSS as needed. For example:
<span><strong>What have we done?</strong></span>
You can try to use overflow-x: hidden; on the <body> to simply hide the scroll bar. However, you'll not be able to easily see the content outside the view port.
For mobile devices you can use media queries to specify style sheets:
<link rel="stylesheet" href="styles/mobile.css" media="only screen and (max-device-width: 480px)">
Or you can use <meta> elements:
<meta name="viewport" content="width=device-width, user-scalable=no">