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; } }
Related
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
I built this very simple site for work and I found an issue related to the top navigation bar when resizing on mobile (please note there is no mobile version of the site, nor will be).
When resizing on mobile screens, the navigation bar remains fixed, while the content can be moved. This means that, while the navigation bar stays stuck at the top left corner and partially blocks the screen, the text moves freely under it. Please refer to the screenshots below:
Mobile: Example 1
If you check the source code, the top navigation bar is set to fixed. If I remove this line, resizing on mobile works fine, but the top margin specified for the content (so that it doesn't overlap with the navigation bar) becomes huge.
Changing this margin, however, affects the navigation bar when resizing the window on a computer, as you can see below:
Desktop: Example 1
It's been many years since I last worked with html and css, so please excuse me if I'm missing the obvious.
How can I find a solution to this?
This is happening because you given width and max-width 100% to your top class, If you want to fix this in mobile devices you need to write media query
Try below code to your css
#media (max-width: 500px){
div.top{
width: auto;
max-width: none;
}}
if you want to show navigation in mobile view then use below code.
#media (max-width: 500px){
div.top{
position: relative;
}
div.normal{
margin-top:200px;
}
ul.menu li{
float: none;
}}
My designer just gave me website which I need to use different images with z-index on them on both side of website. The image that I used on the left side is fine but the one on the right side shows a scroll bar on the bottom when opened on smaller screen resolution (below 1920 width).
So How can I get it right?
Take a look http://whitepixelstesting.com/sunexim/
You should have used background image, it would have been simpler.
But it this case, I would recommend you to use a CSS Media Query.
By adding overflow: hidden to your #main_wrapper, you solve the problem for screens between 1920px and 990px. If you keep the hidden overflow, you will hide your content for those below this screen width. That's why you should add this at the end of your Style Sheet:
#media all and (max-width: 991px) {
#main_wrapper {overflow: visible;}
.right_bg {display: none;}
}
I am creating a website with a responsive layout.
I have two columns: Sidebar and Content.
The sidebar has 20% width and has a fixed position whereas the Content has 80% width with static position.
How do I stop the content from hiding under the Sidebar when the screen size is reduced?
overflow:hidden
Try adding that
you can do this with media queries
#media (max-width: 800px) {
#sidebar {
display: none;
}
}
When you make something fixed, it's taken out of the document flow. As such, the content should be hiding underneath the sidebar irrespective of whether the two columns widths are set to 20% and 80%.
You can see that here: http://jsbin.com/OQOSEZoF/3/edit (the words '80%' don't show).
So you will probably need to set padding-left: 20% on the content <div> anyway. That may solve your problem on it's own.
If however, if you have other content down the page, such as a footer that is being overlapped by the fixed div, you could use media queries to change styles depending on the screen size.
#media only screen and (max-width : 500px) {
#sidebar {
position: static;
}
#content {
padding-left: 0;
}
}
See the demo here: http://jsbin.com/OQOSEZoF/6/edit
When you resize the result to less than 500 pixels, the text in the footer becomes visible because the sidebar switches to static.
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.