I have searched for similar posts but have not found a working solution.
I'm trying to hide the scrollbar on smaller screen devices while still allowing the user to scroll left to right.
Here is my current styling:
#include media-breakpoint-down(xs) {
overflow: auto;
width: 320px;
display: -webkit-box !important;
display: -moz-box !important;
-webkit-scrollbar {
display: none;
}
}
Setting the display to none will actually make the scrollable area disappear.
Related
I get this vertical white line on the right side of my page.
it's only happening on mobile. found it using device tool bar: https://jood19.sg-host.com/
I designed the website "mobile-first". only used media queries for desktop.
I've tried, without success, the following code
html body{
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
can you recommend something?
It's because your image has a set width which happens to be wider than the mobile screen.
You can keep the set width if you add a max-width to the image. This will mean it will be the same size as you originally had except for when the screen is too small for that and then it will take up the full width.
.about-section img {
width: 28rem;
max-width: 100%;
}
Setting your .about-section img on the dev tools seem to remove the whitespace. Tried with 21 rem on mobile screens.
.about-section img {
width: 21rem;
}
Having a weird issue of position fixed not working properly. You can see it here: https://randohinn.com/uus/ When you scroll on your computer, the header satys in place ok, but on mobile, once you scroll, it moves by some 15 pixels so that the top half until my name letters start is not appearing. Why is it so and how could I fix it?
It might not be obvious, but the extra height is caused by extra width. Your <body> is wider than 100vw and causes a double-scroll effect, causing the fixed header to move around as you scroll the body.
You placed the following CSS rules in your main.css:
.row {
...
margin-right: -.5rem;
margin-left: -.5rem;
}
You probably want to wrap them inside a #media(min-width: 768px) {} query, similar to how Bootstrap does it.
Or, you can just set them to 0 on mobile:
#media(max-width: 767px) {
.row {
margin-right: 0;
margin-left: 0;
}
}
Just make sure you place this after the ruleset mentioned above.
The above fixed the issue for me in emulator, but the emulator is not always accurate. If you still experience the double scroll, use
#media(max-width: 767px) {
body {
width: 100vw;
overflow-x: hidden;
}
}
I noticed that whenever I resize my screen, it somehow recalculates the size of my image and makes it blurry. This happens instant in chrome, but after resizing in safari. I have been trying to wrap my head around this for a while now but I can't seem to fix it.
What is causing the blurring?
I've quickly inserted only one of the images but this happens with all.
Code is based on Zurb's Ink.
https://jsfiddle.net/bnL1tyku/
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
clear: both;
display: block; }
I've a question, I'm trying to structure a site so that when it is in desktop mode a particular div which contains an img element is set to display:none;
When the screen size gets to 450px or less I would like to set the div to display:block and show it.
However, I'm having an issue doing so as the display:block never get's applied. I can do the reverese (display:block to display:none) . I'm guessing my issue is that I'm trying to apply a style to an element which does not exist on the page, if that is the case is there a way I can hide it, so that it takes up no space and show it when the screen is less than 450px?
Any help is much appreciated.
This is my CSS
#toplogo{
display: none;
margin-left: auto;
margin-right: auto;
}
This is my Media Query
#media screen and (max-width: 450px){
#toplogo{
display: block;
}
}
This is the HTML
<div id="toplogo">
<img src="/images/myimage.png"/>
</div>
Any help is much appreciated.
Your code seems just fine right now.
But I'd suggest mobile first approach, so the global style is aimed at mobile devices and later altered for bigger screens. Be sure to check what are you altering with your css media queries and check your code order so you are not overwriting media queries with your styling later in the 'global' css code
This snippet below wont work as intended if my media query will be placed at the top of css file, as it will be later overwritten - example of badly organized css media query
Working example
/* mobile first approach */
#toplogo {
display: block;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
.hey {
display: none
}
#media screen and (min-width: 450px){
/* hide block when window width is at least 450px */
#toplogo {
display: none;
}
.hey {
display: block
}
}
<div id="toplogo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png">
</div>
<div class="hey">Hey, I'm bigger than 450px!</div>
http://jsfiddle.net/gfuunyak/4/
No need to apply any js.
Your css & media query are perfectly written; It works in my end; if not work in your end; then just add !important after display: block;
We have a web page generated via SharePoint 2013 that has a width of 1024. We use the following style on the main content div:
#container_master {
width:1024px !important;
margin-left: auto !important;
margin-right: auto !important;
background-color:#FFF !important;
}
This works well on resolutions greater than 1024. Whenever someone sets their resolution to 1024 (which we have a couple of folks that do that), there is some extra padding on the left and right sides which bring about the horizontal scroll bar.
Whenever I use FireBug, I see the following HTML being generated:
<div aria-relevant="all" aria-live="polite" style="margin-left: 20px; margin-right: 20px; min-width: 1024px;">
This margin of 20px on the left and right is the problem. I found that it can be removed by adding the following CSS:
html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div {
margin-left: 0px !important;
margin-right: 0px !important;
}
However, whenever I do this, the page is no longer centered on screen sizes greater than 1024. Any ideas on how to make the page "full screen" for those using 1024 resolution while making it centered for those with greater resolutions?
There's a nice trick for this in CSS.
use:
html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div {
margin-left: 0 auto !important;
margin-right: 0 auto !important;
}
This is the same as:
html{ margin: 0px; margin: auto; }
Sometimes IE won't use margin: auto; To solve this (in some way) add:
body {
text-align: center;
}
But this only happens with old IE browsers.
Use max-width:
#container_master {
max-width:1024px !important;
margin-left: auto !important;
margin-right: auto !important;
background-color:#FFF !important;
}
You need to replace the width property with max-width and reset the min-width:
http://jsfiddle.net/ht2Gc/
div {
max-width: 1024px !important; /* here */
margin-left: auto !important;
margin-right: auto !important;
background-color: #FFF !important;
min-width: 0 !important; /* and here */
}
**A lot of screens have a width of 1024px. for smaller screens the horizontal scrollbar isn't avoidable when you want to have a specific width of your webpage/web application (you might want to consider using min-width and max-width). Unless you are designing your website for a specific browser such as chrome I would advise to make your webpage about 4px smaller. Most web browsers have small borders on the sides, which means a 1024px screen loses a few pixels for your display. Please consider the things said above.
You can probably solve your particular problem with the following css line
body{margin:0;padding:0}
What happens here is that you tell the body to have no padding, which means your website has no extra margin on the sides.
this should solve your problem with the margin. If the scrollbar still appears while you dont want it, then also add these lines to your css:
#media only screen and (min-device-width: 1020px) and (max-device-width: 1030px){
body{overflow:hidden}
}
This checks whether the window size is within certain limits (in this case between 1020px and 1030px), if that is the case, the body will disregard everything that is bigger than the window, thus disabling the scrollbar.