I have an issue in Angular 7.
I have created 3 columns. It is possible to change the width of the first and the second columns and the last one is is calculated consequently. When the window width is portrait, the first 2 columns disappear.
The issue is that the third column doesn't change its width in portrait status, but it is less than 100% (as written in the CSS file). How can I make it 100% for mobile view?
Related
I am using Photoshop, to create a series of Wireframes, for a future eCommerce website.
I understand that Bootstrap operates on a '12 column' basis. The width, of each column, dependent on the device it is being viewed on.
Whilst going through Bootstrap's website, I came across this image:
My current Wireframe is for a screen width of 360px. To figure out the column width, I divided the 360px by 12, as to reach 30px. By factoring the Gutter Width of 30px, as displayed in the above image, I am left with 0px for the content to be placed within the Column.
Where could I be going wrong with this? I would like to figure out the width of each Column, on a mobile device.
From a Wireframing perspective, even though you can operate with 12 columns on the smallest screens, you should NOT. Instead, you should only use one column i.e. full width or two columns at the most on the smallest screens.
Also, the smallest screen is 320px wide, not 360px.
320px - 30px (15px for left and right margin) = 290px is what's left for content on the smallest devices.
290 / 12 = 24.2px per column including gutters! That's why you should not utilize all 12 columns on the smallest screens (unless you have something very tiny such as icons).
* Edit *
Accidentally wrong picture was uploaded for standalone case. Now corrected
* Edit *
I am unable to set the column widths (with col-) within and iframe. The CSS selector seems to be completely ignored. The very same page if requested as a standalone page (not iframe) works as expected. Please see the attached pictures.
Standalone:
Within iframe:
The out of the box media widths are
-xs smaller than 768px
-sm 768px
-md 992px
-lg 1200px
So with your iframe set to 1000 will fall in the -md category. The way the columns work is, it will default to 12 wide if it is smaller than what is listed. Since you had it set to -lg and the iframe was only 1000, then the width automatically adjusted to 12 wide.
Example col-xs-6 will be 6 regardless of how big or small you make the screen but if you use col-sm-6, then it will be 6 until the screen width goes below 768px, which then it will automatically jump to 12 columns wide.
I've got Zurb Foundation 4 setup in an example as per the instructions here.
When I create a basic page with one row and 3 columns with a width of 4 and I change the viewport (browser) size, the width of the columns do not change. They just stay at the static value of whatever it started at.
I was under the impression that it should 'just work' to scale the widths of the columns dynamically to be responsive to screen size.
Is there something I'm missing here?
Here is the test application demonstrating my troubles.
Just dawned on me that the problem was that I was setting a fixed width on the body element. Ooops!
So, here's my situation :
I've built a website using Twitter Bootstrap.
The main design - among others - consists of a left sidebar (span3) and the main content (span9).
Now, I'm trying to fit a 728 x 90 AdSense Leaderboard ad in the span9 block and - guess what - I noticed it's slightly bigger than the available block.
So, I'm thinking about re-sizing the whole griding system (= increasing the grid column width by some pixels).
How should I go about it? What if I go and Customize? Which variable should I edit, so that the alternative CSS remains a drag'n'drop replacement for the existing bootstrap.css?
And, last but not least : will it work without having to tweak 1001 different CSS options?
The three variables below control the gutter (spacing between columns) in the Bootstrap grid. The defaults are shown below (taken out of variables.less. Make these values smaller to make the columns (span*) themselves wider.
#gridGutterWidth: 20px;
#gridGutterWidth1200: 30px;
#gridGutterWidth768: 20px;
The fluid grid calculates it's values from the above variables too:
#fluidGridGutterWidth: percentage(#gridGutterWidth/#gridRowWidth);
#fluidGridGutterWidth1200: percentage(#gridGutterWidth1200/#gridRowWidth1200);
#fluidGridGutterWidth768: percentage(#gridGutterWidth768/#gridRowWidth768);
I'm trying to make a table that stretches 100% of the page (or whatever container it's in, depending on where I use it).
When I specify the width of the table to 100%, it automatically resizes the columns based on the width of their content. This is nice most of the time when I wouldn't mind different width columns, but for this, I need all of the columns to be the same width. I know that I could specify a percentage width for the columns, but I need this to work for any number of columns.
Here's my code so far: http://jsfiddle.net/zwWHZ/2/
Is it possible to have a table with a width of 100% and equal column widths without having to specify the percent for each column with pure CSS?
I tried putting table-layout: fixed; into the table section of the CSS, and that appeared to work (even when I changed the number of columns). The source where I found that is here.