Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am creating a responsive website. I am taking the pixel widths and converting them to fluid using target รท context = result. Everything fits perfectly in the 1140 wrapper when fixed but when I convert everything to fluid it doesn't fill up the entire 1140px width wrapper. I can't figure out what I'm doing wrong.
You can see how everything is lining up here and how its overall width of the 3 columns is more narrow on the fluid:
HTML page for fixed width
CSS for fixed
HTML page for fluid
CSS for fluid
Shouldn't they all be the exact same width?
Thanks!
That's because you incorrectly calculating percentage for columns margin and width.
Since you use box-sizing: border-box; on section#hp-cols, the inner width for the section with 10px padding in both side is 1120px, not 1140px. If you use width: 31.57894%; (360px divided by 1140px) for your column, it would give you columns with 353px wide instead of 360px (since 31.57894% of 1120px is 353px).
The solution is to recalculate all percentage value, and use 1120 as divider. It should be like this.
section#hp-cols {
padding: 0 .89285714%; /* 10px / 1120px */
}
section#hp-cols ul li {
width: 32.1428571%; /* 360px / 1120px */
}
section#hp-cols ul li:nth-child(2) {
margin: 0 1.78571429%; /* 20px / 1120px */
}
Here is the fiddle and full demo of fluid width page. I also made fiddle and demo of fixed width page for comparison.
Hope it helps :)
You have padding on your fluid example. Really though, the way you are doing the wrapper is "wrong" (not as accurate/efficient). It should be
#wrapper {
width:1140px; margin:0 auto;
}
Then your contents inside can be floated with a percentage width and through media queries, you change the width of the wrapper at breakpoints.
Why not use a framework like Bootstrap? It would make this much easier/quicker.
Related
I am trying to use the code of bootstrap-side-navbar and building on top of this demo. That's pretty much what I need but I want it not to fill the whole screen on desktop.
The problem is that when I add a max-width to .container-fluid the sidebar's column and the content's overlap, see the screenshot:
Whats a good, responsive, solution for this?
Replace container-fluid with container and add following css
#content {
position: relative;
width: calc(100% - 120px);
float: right;
}
I am calculating width bycss calc property but still you have to write media query to handle the layout in different screens.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have this blogspot blog: sourcewing.blogspot.com
Now if you go to drawings tab, you'll notice the electric bulb image is not aligned center of the post. What I want to say is that it is taking its original width and height. If the width would be 1200px, it would go out of the tbody (Please check the HTML of this image).
What I want is that it should shrink automatically (maintaining the proportions), according to the width of div class="post-body entry-content"... element (you'd find by inspect element). This should apply on the all images that have more width than this div.
Also, I would like to know why isn't it automatically shrinking, while the text is automatically aligned?
Remove the fixed height and width attributes from the img element.
You can then add a class eg .auto-contain or whatever with the following css:
.auto-contain {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
This will force the image to always have the same width as the container, but the height will grow in proportion.
So you are missing a few things.
height: auto;
max-width: 100%;
box-sizing: border-box;
This will achieve exactly what you are after.
Just to explain:
height: auto; - This will make sure your picture remains in proportion.
max-width: 100%; - Your image will behave responsively but wont break it's own natural sizing.
box-sizing: border-box; - Because you have padding you don't want to break the width this will keep padding but not break out of your container.
First remove the width and height attribute from your img tag.
To solve the problem :
img {
height: 90%;
width: 90%;
}
if you set height and width 100% normally your image would be as big as the parent. But in your case this does not work. 90% however looks better.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So at this moment, I'm trying to center the 3 social media icons in the footer of the website nicely.
So instead of using margin and pixels, which would not be responsive when viewed on smaller screens ofcourse, I tried using percentages, I thought this made it responsive. I always thought the percentage of the screen would be calculated, resulting in always the same percentage distance on different screens with different widths..
As you can see on the website (http://riksblog.com/Marnik/index.html) this is clearly not the case when resizing..
Can someone please clear out how to make it responsive and why the combination of percentages and margin isn't correctly working when resizing?
How can I always make sure the 3 logo's are centered on every device?
Solution to center multiple images in a footer and a margin between them:
.footer {
width: 100%;
}
.logo-container {
margin: auto;
width: 320px;
text-align: center;
/* you can set this to the lowest bound,
* or you can change this based on breakpoint
*/
}
.logo {
margin: 0 10px; /*or whatever spacing you need*/
}
<div class="footer">
<div class="logo-container">
<img src="logo/path" class="logo">
<img src="logo/path" class="logo">
<img src="logo/path" class="logo">
</div>
</div>
The percentage is based of the parent container width.
Here, if you want them to always be centered you could put them into a parent container and then give that a width, then have that set to margin auto to center it.
so something like this should work
html
<div class="footer">
<div class="logo-container">
<img src="logo/path" class="logo">
<img src="logo/path" class="logo">
<img src="logo/path" class="logo">
</div>
</div>
css
.footer {
width: 100%;
}
.logo-container {
margin: auto;
width: 320px;
text-align: center;
/* you can set this to the lowest bound,
* or you can change this based on breakpoint
*/
}
.logo {
margin: 0 10px; /*or whatever spacing you need*/
}
As stated in the comments you could either set the width to the minimum width (assuming it fits to the smallest screen size/etc). Above we're doing 2 things. 1 putting the images in a container, and then having them center w/ text-align: center. Then we take that container, and center align it using margin:auto.
here's an ex fiddle: http://jsfiddle.net/7med35md/
From the W3C spec
<percentage>
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
See also http://www.hongkiat.com/blog/calculate-css-percentage-margins/ for a detailed explanation.
For this you should use media-query Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution It's a W3C recommended standard and is a cornerstone technology of Responsive web design.
media-query allows you to write different CSS's for different screen sizes.The link of website you gave also using #media query.So u should learn and use it if you want such responsive design "make sure the 3 logo's are centered on every device".#media query allows you to do that.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I saw somewhere that it wasn't recommended to use height and use padding instead, why that? The height and the padding produces the same results - at least in my trials -... is there a reason for me be to be using padding only instead of height?
To answer your question - of course you can use height in responsive websites without a problem.
I think where you may have read about using padding in place of height is for keeping the aspect ratio of an element the same since percentage based padding is relative to the width of the element and percentage based height is relative to it's container.
A common use case for this is embedding a YouTube video in a responsive wesbite.
HTML
<div class="video-container">
<iframe src="//www.youtube.com/embed/k_d5jWvBirU?wmode=opaque&rel=0&showinfo=0&modestbranding=1&controls=2&autohide=1" frameborder="0" allowfullscreen=""></iframe>
</div>
CSS
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
Fiddle here: http://jsfiddle.net/84wm08k7/
As you can see the height of the video-container is set to 0 and the padding-bottom is set to 56.25%. This restricts this element to being a 16:9 aspect ratio for video and is responsive.
well to start if you use padding then the page will stretch itself to fit the screen leaving the given amount of border (padding). If you use a specified height (in pixels per say) the page will always be the same height regardless the resolution of the screen. If you are using height as a percentage or some analogous value, than it shouldn't matter other than that the amount of space (padding) will vary depending on the screen.
It depends on what you're doing. For a lot of my work, I'll set a min-height or max-height that way the element grows or shrinks depending on the content.
Padding would work as well, if for instance you have an element with text that would be centered vertically, you can use padding to control height as well. It's all up to the site design, and what you're trying to accomplish.
this is a code example you can check w3schools.com for further information, I've chosen the example in which you can manipulate the dom
function myFunction() {
document.getElementById("myBtn").style.height = "50px";
}
<!DOCTYPE html>
<html>
<body>
<button type="button" id="myBtn" onclick="myFunction()">Change the height of this button</button>
</body>
</html>
I want to create a new website with Bootstrap and I need it to be 100% in width, but I do not want it to be fluid. At least not for now.
The issue I have is: using bootstrap standard limits you to 960px and with a fluid layout it is full width but behaves like a fluid layout should by moving elements to become stacked when the window is shrunk in size.
Is there a way to have 100% width with a static bootstrap layout?
This is easy to achieve in Bootstrap 3, just replace the .container div with your own:
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
Thanks to Erik Flowers for the heads-up:
http://www.helloerik.com/bootstrap-3-grid-introduction#fluid
UPDATE
Bootstrap 3 now offers a built-in fluid container class, just use <div class="container-fluid">. See docs.
100% width ... static
This is a bit of an oxymoron. A 100% width layout isn't static.
Bootstrap uses a .container class to set a predefined width. Increase this to your desired page width if you want it to be greater than it's default. Be careful though that the sizing of Bootstrap's span* and offset* classes will need their widths adjusted accordingly.
Just don't include the bootstrap-responsive.css in order to disable the responsive function.
If you don't want a .container gutter/margin you can put your content outside the container but keep in mind you must maintain your content layout by yourself(still can use grid but lost an ability to centering your content) and don't forget most of the Bootstrap component like .navbar need .container to control its width.
One of my work need a full screen carousel to holding all contents so I wrap my content with .container to center the content.
I can't quite figure out how to reply to the main question, but here's what you want OP
As said above, don't use .container, use your own class like:
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
Then when you build your grid, just use col-xs-* for the columns. You will now have a 100% width site that doesn't stack in the "mobile" view. Welcome to the 90's ;)
I guess what you mean is you don't want margin/padding on the sides. (that's the only way your message makes sense - a 100% width will take the full size of the screen so it will never be static - the size will change depending on how big the window is)
We don't have a use-case or JSFiddle from you so I can't give you exact code but you need to make sure your body has margin:0 and padding:0 and then look for the other divs with Firebug or Chrome Web Dev tools.
If you want your layout to be fluid but stop at a certain point growing, then you need to apply max-width:1000px (for example) to your body or your general container/wrapper element.