For my PSD Design the container width is 1136px and i used bootstrap for my design so i decided to set container width is 1166px because the container padding 30px was matched the row padding 30px so it is right way to fixed 1164px or shall i go to 1136px give me a clarification for setting width for container
If you want your site to be responsive you should use Bootstrap breakpoints instead of setting fixed width to your container. Try to not get too attached to your PSD and think of your website as something more fluid.
Related
I have a project that involves having a sidebar that floats over an image. The sidebar is set to position: absolute to keep it over the image and to help it scale along with it when the screen size changes.
Here is a codepen that basically recreates what I'm working on: https://codepen.io/gojiHime/pen/JmYqaz
The issue I'm having is with controlling the size of the contents within the wrapper container. I want the preview div to scale along with the wrapper container. Currently, it does not work as expected in that the preview div does not start scaling as the width and height change for wrapper and for thumbs-inner. The thumbs-inner div scales correctly for the most part, but the bottom of div is cut off so you can't see the bottom of the scroll bar in smaller screens.
I know I set overflow: hidden on wrapper but without it the content in preview would extend outside of it as the height of wrapper changed.
So, I'm looking for ideas on how to fix the aforementioned issues. wrapper must stay absolutely positioned and the thumbs-inner div needs to have a vertical scrolling feature, so I can't do anything with those. I don't think setting a height makes sense for wrapper since it needs to scale responsively in height and width.
EDIT: Not sure how much this will help but this is a screenshot of what the layout of everything should look like: enter image description here
The Kraftmaid logo, full-size thumbnail and the text below it (which are in the .preview div in the codepen) have to be visible at all times when changing the screensize.
I'm not sure if this is exactly what you're looking for, but generally for responsive layouts you would want to avoid fixed dimensions, such as specific widths set in x number of pixels.
This shows your code with responsive layouts for .wrapper and .thumbs-inner (note that I haven't addressed any content issues within those two divs since I have no idea what your intended layout is):
https://codepen.io/anon/pen/ZqrZaj
Note that:
I've switched the two layout divs to use box-sizing: border-box; which will allow you to use pixels for margin and padding but still use percentages for width.
I've removed width from .wrapper and switched to percentage based absolute left and right declarations - if you modify these values, the layout should still work.
I've added borders to make the layout more obvious.
Im trying to build some fancy item grid by using bootstrap and flex. Therefore the item image always has to extend to 100% width of available space by keeping the 1:1 ratio.
http://www.bootply.com/kPLGHtA7Kh
I got it to work by using the css background image. But I struggle to make it look the same by using an img-tag. Im running out of ideas, hope you can help me.
In your CSS just specify the width: 100% on your image and don't touch the height (or set it to auto which is the default).
The parent of your image should also have a position:absolute or position:relative in order for the width to work properly
Demo : http://jsfiddle.net/s3spdy5z/
I think the images are pushing the width of the boxes to the max-width so kind of overriding the flexbox settings. With the background images you basically don't have any content inside them so flexbox can calculate the widths and not worry about content. The images are set to 100% but it thinks you want 100% of the max-width therefore the grid doesn't fit anymore.
If you set width: 33%; on the .flex-item and remove the min and max the grids will look the same.
How can I make my div the max size of a container? When I try searching it up my self I always find articles talking about max-width.In my website my content area is a div that has 4 items in it and I want to set the width of content area to 100%. To make all the items fit perfectly but when I do this the margin is overridden?
Try placing the following in the style or CSS and see if it works:
box-sizing:border-box;
My site has fixed width layout. I mean i'm not using responsive layout.
So I removed bootstrap-responsive.css file.
But it looks like bootstrap has some bug in the footer background while using fixed width layout.
I mean check this snapshot.
Can someone tell me how to fix that issue?
Based on the scrollbar at the bottom, it seems that your window size is less than the page size, since you removed the responsiveness. Based on a quick test on the Bootstrap doc, I think that you can fix this by adding width:100%; to the body tag. Everything is just set to fill the item containing it and nothing else has a width set (even the body tag by default). This should stretch the page to wrap around all elements instead of just filling the window.
UPDATE: CSS should be min-width:960px. Naturally, in other instances you would want to change this minimum width value, but for the Bootstrap CSS without responsiveness, this is the base grid system width.
Im trying to build a mobile first page, usually I work out my container widths based on the overall container max-width.
So if my container should be 200px wide and my overall container has max-width 1000px then my percentage calculation is 200/1000*100. But how do I make this calculation if my overall container has no max-width but instead is set to 100%?
I apologize in advance if this is a lame answer but I'd look into an existing the Grid framework, such as http://foundation.zurb.com/ (or other) and build on top of that, rather than writing it from scratch.