I am using CSS and HTML trying to reproduce the homepage of this website http://www.newsweek.com/ as an exercise.
If you open the page with a large screen you will see at both sides two empty columns that gradually decreases as the broswer width is reduced.
I want to reproduce this behaviour but can't make it until the end: I have set a container class with initial width 80% that become 100% at some point thanks to media query in CSS:
#media screen and (max-width: 1047px) {
.container {
width:100%;}}
What I miss is the gradually reduction of this container. How it can be made?
Thank you very much
For an experience like that, all you need is something like this:
.container {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
If .container is applied to a block level element (like <div>) then this element naturally goes to be as wide as it can. This just says don't go wider than 1200px, and designate the left over space equally between the left and the right.
If for some reason the element is not block level (e.g. a <span>) then simply add display: block; to the above code to make it block level.
Related
I have 2 boxes (About Us and Contact Us) that don't change (stack) when you resize the browser. I've checked the forums and it looks like I need either a clear:both or overflow:hidden. My problem is, I've tried both of those anywhere I can think of and nothing happens.
So far, I've tried overflow in the wrapper, box1 and box2. As well as paragraphs 1-3. I've also tried clear in pretty much every spot around/in/under the wrapper div in my HTML.
When the browser reaches the 768px breakpoint, you need to change the div's display mode to block so that it doesn't allow any other item in its horizontal space.
#media (max-width: 768px) {
#box1 {
display: block;
width: 60%; /* Set according to your requirement */
}
}
Output:
JSbin
Can you please take a look at this web page: http://tagrig.herokuapp.com/
I am not sure why the content in the section tag will magnetically attach to the right side of screen when I resize the screen width from 1424px to 1423px. I found the issue happens in both Chrome and Firefox.
I expect the section can always keep in the middle and leave the margin until the width is reduced to less than 480px.
Would you please tell me how to fix this issue. Thank you.
Your main wrapper is exceeding the 100% width.
The CSS:
.wrapper {
width: 100%;
margin: 0 5%;
}
is making that element 110% wide. change the width to 90%;
This is my scenario:
I have a fixed-positioned DIV element (lets call it 'wrap'). It must not overflow the margins of 100px from the window's edges.
Inside this div reside 3 other DIVs ('first', 'second', and 'third').
Only the 'third' DIV has a fixed height and should always be positioned at the bottom of the containing 'wrap' DIV.
The issue is that I want the 'wrap' DIV to occupy as less possible height of the screen. I want it to shrink its height if 'first' and 'second' are fully shown, and scroll 'second' if they don't.
I find it kind of hard to explain, so I hope you can get the idea.
Ask me anything if you need any clarifications.
I've created a pen for it on CodePen that you can fork and play with.
I can't succeed in achieving this without JS.
I'll really appreciate your help...
Thanks.
You can create custom styles for varying screen sizes using #media in your style sheet like
#media screen and (max-width: 800px) {
#wrapper {
width: 90%;
min-width: 0;
}
#column-main {
margin-left: 0;
}
#column-sidebar {
width: auto;
float: none;
}
}
Visit here for a better explanation.
I have an image of a person fixed in the background of my tumblr layout (my tumblr is tsuzami.tumblr.com), and it appears like so on my screen resolution of 1366 x 768:
http://oi39.tinypic.com/5x0f1g.jpg
but when previewed on screenfly using different screen resolutions, the person is placed in awkward location that obviously look stupid:
http://oi44.tinypic.com/f2yab.jpg
How would I lock this photo in the same place where I intended for it to be no matter the resolution? This is the code I am using for the image:
<div style="position:fixed; top: 0px; left:-140px; z-index:-2;"><img src="http://i43.tinypic.com/j7ca2u.png"></div>
It's hard to avoid that, as the content area is 500px wide, and as the screen gets narrower (even on a desktop) the content will start to cover over the image. I would be more inclined to wrap the whole page in a container div and place the image as a background on that, and then set a min-width on the container. An easier way would be to remove that image div you have currently and just add these styles to the body element:
body {
background: url(http://i43.tinypic.com/j7ca2u.png) no-repeat -250px 0;
min-width: 1200px;
}
However, I'm not too keen about setting a min-width on the body element, so preferably add those styles above to a div that wraps around your whole page.
I've the following part of HTML structure (closing tags omitted for simplicity, indentation represents nested tags):
...
- <div class="main-content-wrapper">
- <div class="item-image-wrapper">
- <img class="item-image fit">
- <div class="item-text">
- <h2 id="itemTitle">
- <p id="itemContent">
with the following CSS
.itemdetailpage section[role=main] article .main-content-wrapper {
display: -ms-grid;
-ms-grid-rows: auto auto;
width: 100%;
height: 100%;
}
.itemdetailpage section[role=main] article .item-image-wrapper {
-ms-grid-row: 1;
width: 100%;
height: 100%;
}
.itemdetailpage section[role=main] article .item-image {
margin-top: 0px;
margin-left: 0px;
}
.itemdetailpage section[role=main] article .item-image.fit {
/* Fit image to page size */
max-width: 100%;
max-height: 100%;
}
.itemdetailpage section[role=main] article .item-text {
-ms-grid-row: 2;
margin-right: 5px;
}
The goal is to have the IMG no taller (and no wider) than the main content allows, i.e. to fit the main content space if bigger than that, or to stay at its original size if smaller. The text can just flow below the image, and so can also go below the fold, no problem with that. This should happen with no JS code, CSS only.
When the item text is narrower than the image, it's all ok. The image wrapper is some pixels taller than the image, don't know why, but it looks ok.
The problem I see here is when, at the same time: the image is taller than the available height, and the item text is wider than the image (the item title, in particular). In this case the image wrapper gets taller than its container, and so follows the image. E.g. .main-content-wrapper receives a (correct) height of 900px, but item-image-wrapper is 1024px tall and image is 1024px tall (its natural height).
I know this 100% DIV height has come again and again, and I've looked for answers, but I was not able to find one suitable for this case.
EDIT:
I've found this SitePoint reference, the paragraph where it says "Percentage values refer to the height of ...": does anyone know anything about this rule?
One thing you can do to achieve this in certain situations is add width: 100% and height: 100% to every intervening element, and rely on the text extending out of its containing block if the image takes up all of the available space. This won't work in every situation because it's then very hard to get anything else on the page to make room for the extending text, but on a vanilla HTML page containing nothing else it works, and it might be possible to make it work in some other situations by putting a floated element at the end of the text content and putting a clearing element in any spot that needs to come after that text content, as in this jsFiddle: http://jsfiddle.net/t6LvY/2/
As the design accumulates complexity this could get nasty fast, however. You're probably better off just going with a bit of JavaScript to set the max-height of the image to the window height on window resize.
I think you should remove max-height from image class max-width:100% is enough to fit that image to parent container of image. I don't know this will help you or not.
My own proposed (sad) answer: if I want to keep percentage heights on the DIVs, and stick to pure CSS (i.e. no JS), then the goal cannot be accomplished.
The W3C specs says that the percentage in this case is basically ignored (look for text "The percentage is calculated with..."). And also Internet Explorer docs (the browser I'm working with) says basically the same (look for text "* If the height of the containing block...*").