I'm optimizing my website for mobile devices at the moment, but ran into a problem. If i view the site on a mobile device or a small browser window some objects on the site wont have an effective width of 100% anymore, but others will. So you can scroll to the side and half of the content kinda sticks to the left. As Long as the width of the viewport is above 1000Px there are absolutely no problems. I use percent for measurement of the elements, so that shouldn't be a problem.
>1000Px screenwidth
<1001Px screenwidth
The effect isn't obvious instantly, as there wont be a horizontal scroll bar, but you can click and hold at the right side of the site and pull it over. The real problem is, that the header gets pushed out to the side, as it is one of the objects, which still uses the "full" 100% width.
I have a media querie, which changes the header at 1000Px
#media screen and (min-width: 1000Px) {.mobilenav {display: none;}
If i disable this one, the problem is gone, however if i delete the only div using this class
<div class="mobilenav">
<span style="font-size:25px; cursor:pointer;" onclick="openNav()">☰</span>
</div>
the problem is still there… The div does not stretch across the screen, i checked that and at this point i'm really out of solutions.
Here is the css for .mobilenav if it helps
.mobilenav {
position: relative;
}
.mobilenav span {
position: absolute;
bottom: 10%;
}
This may happen because of padding of your header element. You can check in example below it will be as width + padding
.container {
width: 300px;
height: 100px;
background: #ccc;
}
.article {
width: 100%;
height: 20px;
margin-top: 8px;
background: #999;
}
<div class="container">
<div class="article">article 1</div>
<div class="article" style="padding: 4px">article 2</div>
</div>
Related
I have recently Discovered that it is incredibly difficult to mix fluid and fixed layout, So when I finally figured out a solution to a problem Ive been having for quiet a while now, i couldn't resist but to share it with the community that has helped me so much in the past.
i wanted the following look:
by dynamic space i mean it should be very much like when one applies a "margin:0 auto;" CSS rule to a containing div, the white space left and right of the element is the "Dynamic Space" in the example.
I had 6 Requirements:
had to be responsive.
the container had to have a max width of 960px and always needed to be centered.
had to work on IE8 and up.
The Dynamic space on the left had to have a different height, and contain a different color.
The Dynamic Space on the right had to be the same height has the container but a different color.
Has to work with Twitter Bootstrap.
At this point I struggled for 3 days, i tried everything from css table-cells to using bootstrap columns (neither worked out).
I also realized that the only way to have the div in the "same" position on huge screen sizes was to make it 50%.
So at this point i had the Following:
JSFIDDLE DEMO
which was pretty good, only problem was that the red stuck out underneath the container element.
So that My Wonderful Not At All Mathematical brain kicked in and thought:
if my containing element will always be 960px and i need my div on the left to be 50% to stay in the same position, what if i simply took 960/2 = 480px and simply applied margin:-480px.
which worked brilliantly.. until you scale your screen down to about 768px, so add a media query that changes it to margin-left:-370px;.
And it Finally Worked! Here's the Final Code:
JSFIDDLE DEMO
AND HTML:
<div class="" style="background: #000099; position: relative">
<div class="left">l</div>
<div class="container" style="background: #002500">contain</div>
</div>
AND FINALLY CSS:
.container {
max-width: 960px;
z-index: 1;
position: relative;
padding:0;
}
.left {
position: absolute;
left: 0;
width: 50%;
z-index: 1;
background: red;
height: 50px;
margin-left:-480px;
}
#media (min-width: 768px) {
.left {
margin-left:-375px; /*I Used -370 but for some reason it doesn't work now*/
}
}
#media (min-width: 992px) {
.left {
margin-left:-480px;
}
}
I Hope this Helps Someone, Sorry that its so long just wanted to explain the logic as clearly as possible.
Is it possible to change the height of an HTML element when the viewport resizes with pure CSS? It's hard to explain the problem, but I'm still going to try:
What I want, is a page with a header, content and a footer, like most webpages. As I'm working with a 1920x1080 monitor, I'm using that as my standard. The problem however is that not everyone is using a 1080p monitor. Some are using the older standard, 1280x1024 or using a tablet where the height can be 2560px (I'm not doing smartphones, as they will have a completely different design due to the small screen width). On my page I have images, covering a fixed width. If this width is greater than the width of the viewport, the images will be displayed underneath each other:
(Right-click on the image and select "show image" to view at full size)
As you can see in this image, when the viewport is smaller, the images will stack and will fall from the background. The 'Follow me on:' section even felt of entirely. What I want to do is, when this happens, to make the content div larger, so all of the content stays on the page. I know this is possible using height: auto, but when you do that, the fixed height of the footer will follow after it, and on a screen with a large height, there might be a white border because the document height is smaller than the viewport height.
Take some time to learn min-width, min-height, max-width, max-height, (css attributes) and device-width, device-height (css default values of the client viewports). I can not guarantee they would refresh while you drag/resize the browser window or viewports in devices, but I think they help your style rules.
It's slightly unclear to me what your end-goal is with this so I did my best interpretation. If it's not what you're looking for, give me a good mental image of what you're trying to do and I'll try to correct it.
Live Demo
CSS:
html, body {
box-sizing: border-box;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#wrap {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
}
#header, #content, #footer {
position: absolute;
width: 100%;
}
#header {
top: 0;
height: 70px;
background: lightblue;
}
#content {
overflow-y: auto;
top: 70px;
bottom: 70px;
background: limegreen;
}
#footer {
bottom: 0;
height: 70px;
background: purple;
}
HTML:
<div id="wrap">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
I've got a basic website with very long mostly-text content:
HTML goes simplified like this:
<body>
<div class="content" id="01">
<p>LONG TEXT</p>
</div>
<div class="content" id="02">
<p>LONG TEXT</p>
</div>
</body>
Same goes on with about 40 more id's.
CSS looks for these parts like this:
.content {
max-width: 600px;
min-width: 240px;
margin: 0 auto;
}
So the content divs are scaled down with browser window / viewport. This finally takes us to my problem:
Whenever I scale the width of my browser window down, the width of the content div also scales down and so the content itself gets longer, or taller should i say. This leads to situation where current point of focus in content moves down. Especially bad this is when switching mobile device from landscape to portrait orientation or vice versa.
I'm now trying to find solution that scales the height of content both up and down, keeping the current vertical focus point on the screen. Does anyone have any ideas how this could be done in HTML, CSS or JS? Content divs have unique ids, single div not being very long so I guess that at least with JS this should be possible by somehow tracking the currently displayed id?
I hope I got some sense to this, while english not being my native language.
Thanks.
I think what you should do is set the <p> width fixed to the min-width of div.content, so it will never change it's width, but the parent <div> will, according to the current orientation.
You can see an example here: http://jsfiddle.net/dyjXC/1/
CSS:
body{ width: 300px; } /* portrait or landscape */
div.content
{
max-width: 600px;
min-width: 240px;
background: salmon;
border-bottom: 1px solid green;
}
div.content > p
{
text-align: center; /* I centered both the text and... */
margin: 0px auto; /* ... the p itself, but you can use default to left */
width: 240px;
background: lightgray;
}
I hope it works as expected.
I am looking to create a layout for my site where a sidebar is fixed at the right side of the viewport with a 30% width (content is to the left of it) until the browser window reaches a certain width, at which point I want the content and sidebar to be centred and no longer grow with the browser window (since it becomes hard to read at extremely large widths). Here is an idea of the html being used:
<body>
<div id=sidebar>sidebar content</div>
<div id=content>articles, images, etc</div>
And here is some of the basic HTML being used to format it:
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;
}
#content {
width: 70%;
margin-right: 30%;
max-width: 49em;
}
At this point, when the content gets wider than 49em, it sticks to the right side of the page creating an ever-increasing gap between it and the fixed sidebar. What I would like is to have it reach a max width of 49em, have the sidebar reach 21em (so they are still 70:30) and remain fixed, but have that whole 70em worth of width centered in the viewport.
I also want the background colour of the sidebar to span the entire way from the edge of the content to the right-hand side of the screen (i.e. a containing div that centers both the sidebar and content with a max width of 70em doesn't work since the background of the sidebar would only go to the edge of the containing div instead of the viewport). That one isn't as important because it might look fine to put some sort of textured background on the body element to make it look like as though the page is "sitting" on some textured surface (not ideal, but fine). I just haven't been able to center the sidebar and content while maintaining the sidebar's fixed positioning.
Thanks!
Update: here's a very rough schematic of what I am looking for:
|A|B|C|D|
B is the content area with a max width of 49em. C is the sidebar with max width of 21em AND it has to have fixed positioning. A and D would be the margins (each half of the difference between the viewport width and 70em). Background of D must be the same colour (gray) as the sidebar. Background of A must be white.
This solution meets most of your requirements, but you need to provide the width of the content+sidebar (in this case, I put 70em)
HTML:
<div id="container">
<div id="content">articles, images, etc</div>
<div id="sidebar">sidebar content</div>
</div>
CSS:
#sidebar {
width: 29%; background-color: gray; border: 1px gold solid;
float: left;
position: fixed; right: 0; top: 0;
}
#content {
width: 69%; max-width: 49em; border: 1px silver solid;
float: left;
}
#container {
max-width: 70em;
margin: 0px auto;
}
jsFiddle here. (You can test by just dragging the middle frame left and right)
Something like this:
<body>
<div id="wrapper">
<div id="sidebar">sidebar content</div>
<div id="content">articles, images, etc</div>
</div>
</body>
With CSS that is similar to this:
body { background:url(imageForSidebar.png) right top repeat-y; }
#wrapper {
max-width:1000px;
margin:0 auto;
background:#FFF url(imageForSidebar.png) -66% top repeat-y;
position:relative;
}
#sidebar {
width:30%;
float:right;
position: fixed;
}
#content { margin-right:30%; }
The background image on the body would take care of it going all the way to the edge of the screen. You would use a background image that was large enough to do this, but small enough so that it gets covered by the #wrapper background. The background image on the wrapper works in a similar way, but in this case it is just making sure that the sidebar image always extends to the bottom of the content.
You can add media queries into your css
//your normal css
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;}
//media query (you can add max and min width of the sceen or one of both)
#media screen and (min-width:500px) {
#sidebar{
//css you want to apply when when width is changed
}
}
I've looked around and haven't found QUITE what I'm looking for yet, so hopefully this question hasn't already been answered somewhere else!
Anyways, the layout in question can be found HERE. What I am trying to achieve is a fixed width left column, and fluid width content area. For the most part, it works just fine. However, when content expands beyond the browser window's height or width, the sections don't seem to expand like I would want. Notice how to grey bar at the top doesn't reach the right of the page content, and the height of the left column doesn't reach the bottom of the page content either.
Am I right in thinking this stems from the fact that setting something to 100% height or 100% width via CSS is static? i.e. Whatever the height/width of the browser window was when the CSS was called is saved and that's that?
If that's the case, maybe I need to look into some other methods of setting the height and widths of my elements. Any ideas? Also, note that the dummy content in the page is an image for now. I wanted to blur out names, etc. to keep data private.
THANKS FOR ALL OF YOUR HELP!!!
How about something like this...
The left column will only go as far as the right content though. If you want it to expand to the height of the viewport when there's not enough content to fill you'll need some javascript or you'll have to use a repeating background that fills the html
Demo: http://jsfiddle.net/wdm954/KyUfN/
<div id="wrapper">
<div id="left">left</div>
<div id="right">
<div id="content">
<div id="top">top</div>
content
</div>
</div>
</div>
CSS...
/* clearfix */
#wrapper:after, #right:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
#wrapper, #right {
display: inline-block;
}
#wrapper, #right {
display: block;
-height: 1px;
}
/* end clearfix */
#wrapper {
background-color: #000000;
}
#left {
float: left;
width: 300px;
color: #FFF;
}
#right {
margin-left: 300px;
}
#top {
height: 100px;
background-color: #DEDEDE;
border-bottom: 1px solid #B8B8B8;
}
#content {
background-color: #F4EBEB;
height: 600px;
width: 1200px;
}
If the background is the main problem, you can just style the wrapper. This is what I ended up doing for an unruly sidebar, as I didn't want to resort to JS and other solutions didn't work for me. In my case, the issue with the sidebar came because of jQuery tabs, that are part of the theme. When I switched to the tabs, the sidebar wouldn't extend to the full height, so the background wouldn't either.
HTML
<div id="wrapper" class="sidebar-right">
<div id="maincontent">
#content
</div>
<div id="sidebar-right">
#sidebar content
</div>
</div>
CSS
(this presumes 960 grid with 280px sidebar)
#wrapper.sidebar-right{
background: white url('images/bg.png');
background-repeat: repeat-y; /*repeats down the length of the page*/
background-position: 680px 0px; /*moves it into place*/
}
If you have different sidebars, or full-width layouts, change the background image/position and style accordingly. Hope that helps someone.