I have an scrollbar which height is 31.25em. Now this looks fine as it is on screen but if I zoom in via the web browser like from 100% to 110%, the scroll bar seems to increase in size. My question is how to scale the scroll bar so that it looks correct after zoom?
.scrollText{
max-height: 31.25em;
overflow: auto;
padding-right: 1em;
padding-bottom: 2em;
}
Changing scroll bar size with media queries and scrollbar webkit element
Basic Introduction
Firstly on most browsers the scroll bar stays the same size when zooming in. However if you want to change you scroll-bar size you can probably use media queries and the scrollbar CSS element to make the scroll-bar size decrease as you zoom in.
Proposed solution
You can probably use something like this:
#media only screen and (min-width:150px) and (max-width:600px){
body::-webkit-scrollbar {
width: 1em;
}
}
Other resources
See here for further reading on scroll bar size and here for more info on media queries
Related
We're having an issue with the mobile menu on our Wordpress driven website.
Problem:
In small viewport sizes, the carats used to expand the submenus don't show. The carats appear to be there and based on the styles are white but don't show through background. I've tried a variety of different fixes including adding "!important" to various styles without success.
Here's a screencast repro'ing the problem.
https://www.screencast.com/t/ZbZXTegLCWa
You can also repro it by viewing the site in a browser and adjusting viewport size to 440px.
https://www.windworkssailing.com
Thank you for your input!
You have multiple viewports where these menu-arrows are not visible, because the navigation menu's width is to large.
Following viewports are affected:
max-width: 1000px
max-width: 768px
max-width: 600px
Search for those media queries and for the following css element nav.mobile_menu > ul
Changing the width property to auto should fix the problem.
example:
#media only screen and (max-width:768px) {
nav.mobile_menu > ul {
width: auto;
}
}
But keep in mind, that you have to change the css code at three positions since three viewports are affected.
I'm recreating a Wordpress theme myself and I'm facing a problem with the sidebar.
It's fixed and fits my 1280x720 monitor but if you see the website in a screen, for example of 800x400 the sidebar doesn't fit.
As it's fixed, the content hides when the screen is small.
I can use overflow: scroll but what I want is the div to scroll down when you use the main scrollbar as seen in the actual theme:
https://twentyfifteendemo.wordpress.com/
PS: I'm using the theme for personal uses not commercial!
EDIT: Here's my page: http://pvlts.ga/
By changing the "fixed" position of the class info to "absolute", it scrolls normally (line 16 of your stylesheet).
.info { position: absolute; }
EDIT: If you want to keep your sidebar fixed on bigger screens, you can just use media queries to target only screens that are smaller than 1100px wide, like this:
#media screen and (max-width: 1100px) { .info {position: absolute; } }
On a site I'm designing I have a header that stretches 100% of the page width and in all browsers it looks perfect but when I check mobile browsers it will only stretch about 80% of the screen while the rest of the content will go full width.
#header-bg{
height: 150px;
background-color: #33363b;
border-top: 11px solid #25272a;
width: 100%;
}
The site is http://hearthable.com and here is a image of it from an iPhone, the same thing happens on android too. You can see in the image below the dark blue background in the header and footer don't go the full width.
It is because you put width:100%; which are relative to the window size. Your site is not responsive designed, but to solve your problem fast
body{
min-width:1180px;}
setting minimum width as others suggested is not the best option, as different devices have different screen widths, and it also changes according to screen rotation.
however, adding display:inline-block; in both header-bg and footer will fix it.
EDIT:
oh yes, and width:100% in both footer and footer-inner
I've a div named page with lets say 1000px width and position: relative; and in this page div I've a logo with position: absolute; and top:-20px; right: -20px. When the page width is more than 1000px the image should be displayed but when the page width is equal or lower than 1000px the overflow should be hidden (overflow: hidden;).
When I set the overflow attribute in the page div to overflow: hidden; the logo is cropped and when I choose visible I get a horizontal scroll bar when the page width is equal or lower than 1000px.
My idea to solve this issue is to use JavaScript and set the overflow attribute depending on the page width. I would prefer a CSS solution but couldn't find one. :-/
Does anyone have a suggestion how to solve this using CSS?
Thanks!
You can use CSS Media queries (http://www.w3.org/TR/css3-mediaqueries/) to change the layout based on screen size. i.e.:
#media screen and (max-width: 1000px) {
#page { overflow: hidden; }
}
#page { overflow: visible; }
The solution is really simple...
Just make a wrapper div around the page. Let's say the page div is 1000px width and the wrapper div has width: 100%. Then it's the easiest way to set overflow: hiddenfor the wrapper div and when the page size shrinks to for example 1020px a piece of the image is cropped and when the size shrinks further to 1000px the horizontal scrollbar appears because of the page div (which has the default overflow: visible).
And that's it... works in (almost) every 5 year old browser.
You should do this with CSS ( Not Javascript for browser layout issues ) - and use an #media query.
Like this, where the place you want the horizontal scroll to appear is 1200px and below.
#media screen and (min-width: 1200px) {
html {overflow-x: hidden;}
Stick that at the end of your style sheet, or in some tags in your header to test.
I have a web page who's content width is about 900px, but the minimum width (because the header image is larger than the 900px) is about 1200px. This means that when I view my page from a screen that is less than 1200px but larger than 900px, the web page will have a vertical scroll.
I would like for the scroll to appear only when the screen is smaller than 900px-wide.
I've tried adding an overflow-x on the body container, hoping that the body tag takes on the width of my screen. This works in all browsers except on IE7, which I would need it to work in aswell.
Is there a method that would allow this to work?
Let me know if I'm not clear in my explanations.
You might consider using an expression in IE. It's a bit slow but will help you out for older browsers. The CSS would look something like this:
div.container { min-width: 900px; overflow-x: hidden; }
* html div.container { width: expression(Math.max((document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth), 900)+'px'); }