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.
Related
On our website: https://dev.shiftdivorceguide.com/ everything looks great on desktop.
When I switch to smaller screens like tablets I get a padding to the right of the screen. When I go even smaller (smartphones) I get an even larger padded area to the right of the screen.
I am unsure if the Panic Button bar at the top may be interfering with the code of the page (.panic-button-container). I have already tried altering the CSS in the media queries. To reduce the size of the white area on tablets I changed the code below concerning the logo and navigation widths.
I changed:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
to:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 80%;
float: right;
}
}
This helped a little with the layout but I still get a white bar on smaller screens. The smart phones are the worst. Any possible solutions would be appreciated.
Stop using floats. Use Flexbox. Too many clearfix divs in the way.
Obviously the footer is extending past the site content body as well as some other elements.
If you really want to narrow it down set this style:
* { outline: 1px solid red }
That way you see what container is over-extending and then set it's width to 100% instead of a fixed width.
EDIT 2:
Using my technique I have narrowed down the problems:
.footer-menu
remove width: 500px;
.lp-section-content row
remove all negative margin
.vc_column-inner vc_custom_1548439628787
remove all padding
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; } }
I have a page where my content looks great when shifted slightly to the left via the padding tag (%) in CSS. However, when I decrease the window size down to a more "mobile" size, the content (text) is still slightly to the left. I'd like it to be perfectly centered with a desired amount of padding, after a certain min-width occurs.
Use media queries to give the desired effect.
#media (max-width: 480px) {
div {
text-align: center;
padding: 5%;
}
}
any help here would be great.
I'm simply trying to place a header that stretches 100% of the screen. Inside this header is another div containing text. What i have looks fine at full screen, but when i resize down the text stacks on top of each other to accommodate the percentage.
If i set the container width to pixels instead of percentage, the header doesn't stretch the full length of the window unless i specify an exact pixel amount like 1463px - this doesn't seem right because while it may be appropriate for my laptop/screen dimensions i feel like it wouldn't work on a bigger screen with a maximized window.
I just want everything in my container to be able to be positioned according to the 100% of the browser width and height, but using percentages isn't allowing me to fix the elements so they stay put during resize. I've been working with percentages mostly and am having great difficulty keeping them fixed on resize as opposed to pixel dimensions, basically because using percentages is ensuring that my content is taking up 100% of the browser window, whereas I can't be sure with this when using pixels.
html, body {
height: 100 % ;
width: 100 % ;
padding: 0;
margin: 0;
}
.container {
width: 100 % ;
height: 100 % ;
margin: 0 auto;
}
#
topbar {
height: 25px;
background - color: #000000;
width: 100%;
}
# topbartext {
font - family: times;
color: #ffffff;
font - size: 11px;
text - align: center;
padding: 5px;
}
The text is what is moving during resize - when I make the window smaller the text just stacks on top of eachother in order to still fit the screen. I don't want it to do this - i just want it to be fixed and not resize.
HTML :
<body>
<div class="container">
<div class="header">
<div id="topbar">
<div id="topbartext">$10 SHIPPING TO THE USA FOR ALL ORDERS OVER $150*++ FREE SHIPPING AND RETURNS ON AUSTRALIAN ORDERS OVER $50* ++ *FULL CONDITIONS
</div>
</div>
</div>
</div>
</body>
Percentages is best for this.
If you want the text to remain in one line you can add the following to your html and css:
html...
<div id="topbartext" class="topbartext">
css...
.topbartext {
white-space: nowrap;
}
Note that:
In css it is better practice to use a class (.topbartext) rather than the id (#topbartext).
Using this method will mean that if you make your page narrower than the text you will have a horizontal scrollbar added (not ideal). You are probably better off allowing the text to wrap in which case you will need to remove the height: 25px;.
As suggested above you could use css media queries. That will take some googling to learn.
If I'm understanding you correctly you can also use a min-width: 820px on the body. This will ensure your body never gets below a certain width it will provide a horizontal scrollbar if it gets smaller than that.
html,body {
min-width: 820px;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Demo Fiddle
Demo Fiddle Fullscreen
You can use media queries to alter the content styles based on parameters like screen size.
Here's a demo using your example that shrinks the text and allows the #topbar to expand when the screen is smaller than 800px wide (when the text starts to wrap).
For instance:
/* Normal styles that apply all the time*/
p {
font-size:1em;
}
/* Media query that applies if the display media is a screen
and the condition between the brackets is met */
#media screen and (max-width:600px) {
p {
font-size:0.6em;
}
}
You are trying to fit in a lot of text though, you may be better off allowing the surrounding div to expand by removing the fixed height:
#topbar { height:25px; };
If you want to fit all your content on a small screen, this is probably the way to go.
Have you tried using JavaScript? I am not sure what you want since you are setting the top bar container to have fixed height which means the text will be out of the container if you do not resize the height. Here is some script to force the width (or height) to full window size (I had trouble with percentage also):
function resizeTopBar() {
var width = window.innerWidth;
var height = window.innerHeight;
var target = document.getElementById("topbar");
target.style.width = width + "px";
}
window.onresize = function() {
resizeTopBar();
}
The script will not change the way it works (the text will stack on each other) since you never change the height. If you want the height to wrap, remove height: 25px; from topbar.
Screenshot:
You can try this:-
#topbartext {font-size: 1em;}
#media only screen and (min-width: 320px) and (max-width: 479px){
#topbartext{ font-size:25%;}
}
#media screen and (min-width: 480px) and (max-width: 767px){
#topbartext{font-size:50%;}
}
#media only screen and (min-width: 768px) and (max-width: 959px){
#topbartext{ font-size:50%;}
}
#media screen and (min-width: 960px){
#topbartext{ font-size:70%;}
}
#media screen and (min-width: 1280px){
#topbartext{ font-size:100%;}
}
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.