I am working on an ASP.NET MVC application which uses Bootstrap for layout of the views. The main browser that we support is IE 10+. I have a few data fields that I am using multiline Textareas for. I am trying to achieve a simple behavior; I want to give a certain maximum width for the Textareas (say 700px, even if window is wider), but have the width reduce down for small window sizes.
I set up a special class in my Site.css file for them. But it seems like the only way that I can get the Textareas to use the full 700px width is to use the CSS width property. But when using width, the width does not reduce for narrower window sizes. If I use max-width, the initial size is smaller even for large windows. Isn't there any way to achive my desired effect?
I ended up using width with a percentage of 70% (rather than 700px). That gave me the size I wanted with larger screens. Then, I put in a min-width value of 300px to give me (close to) 100% on smaller screens.
Related
I was given a Figma design of a webpage. The Figma page width was 1825px. The width of my laptop is 1080px. Suppose a text in Figma page has font-size 20px. How do I convert it to my laptop so that the ratio is maintained?
I can't use a percentage because I'm using flexbox. And when I try using percentage what it does is takes the percentage of its parent container rather than the entire body.
I also tried using VW. Calculated the view width based on the 1825px breakpoint and implemented that. The issue is that the pixels are getting distorted in this approach.
Also, This answer Typography using VW got lots of upvotes means VW works, Then why am I facing the issue?
I'm using react and I don't want any javascript solution. Is there any way to solve this using CSS only?
Are you sure you need to do it? Font size usually changes when breakpoint is reached.
But if you really need to do it, you may set the font-size based on viewport width.
So if 20px font-size on 1825px width is desired ratio then you need to set font-size to 0,01vw to preserve the ratio across all screen sizes.
The easiest way would be to use media queries.
https://developer.mozilla.org/es/docs/CSS/Media_queries
You can also try other units like vw (view width), rem (relative to the font size of the root element), etc...
https://www.w3schools.com/cssref/css_units.asp
I don't feel that neat's grid is truly fluid. A fluid grid would scale well all the way from mobile to a large tv screen such as 1920x1080. However the way that neat and bitters end up working creates a $max-width variable which is default set at 1088. Even if you change this however there is a size that the website will stop being fluid, the max-size. I feel a fluid layout would constantly grow and shrink no matter the size of the screen.
Currently my way around this is by using fill-parent
.outer-container {
#include fill-parent;
}
This works but it feels hacky, is there no way using neat to properly create a fully fluid grid? Setting max-width has it's limit.
You don't need to use outer-container on an element that's supposed to fill the entire viewport. The only thing that mixin does is centering an element, clearing its floats and giving it a max-width.
In CSS, element are width: 100% by default, so there is no need to specify anything if that's the expected result.
The 'fluid' part of Neat refers to the fact that it does't use fixed widths, but percentages.
While I see the $row-width: emCalc(1000px); in _variables.css, I can't find where the small width is defined for mobile devices. I'm assuming it's just set to 100% but I'd like to play around with changing this.
Your assumption is correct : The row-width variable just sets the maximum width.
The width of the .row is always 100%
When it's a large screen, the width is constrained by the max-width variable, so it's by default 1000px
When it's a small screen (as a mobile device), the .row width is 100%.
I'm assuming it's just set to 100% but I'd like to play around with
changing this.
You may consider to change the breakpoint width, or using different structure (columns?).
Got sample set up here: http://codepen.io/rctneil/pen/myxDc and full page sample at: http://codepen.io/rctneil/full/myxDc
On that sample, I have a header with a .container within it, header is full width and .container is fixed to a particular width.
If you set the width to be 980 pixels or less then the page renders nicely on an iPad, if you set that width to be greater than 980 pixels then you start getting erroneous space on the right hand side.
I thought the default layout mode on iPad was that if an element is wider than the visual viewport, the visual viewport would zoom out until everything fitted and then allow the user to manually zoom into parts of the page. This is how it has worked in the past for me, I am sure.
Anyone know why the site is not auto zooming out to fit correctly?
If you set the height of the page large enough to require vertical scrolling, it will automatically shrink down the width. For example, set the width and height to 2000px on .container, and it shrinks the page appropriately. This probably isn't a viable solution in this circumstance, but it is a interesting observation of iPad viewport behavior.
I would recommend using iOS meta viewport tags. http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
I've coded myself into a corner or I am overseeing something obvious here. I have a semi-fluid CSS layout that is designed like this:
header - 100% width at all times, contains a x-repeated background image
container - fluid (960px to 1200px, centered, contains two columns)
footer - 100% width at all times, contains a x-repeated background image
In almost all cases this works fine.
In summary, the design as a whole scales to any width, yet the content part only to 1200px at a maximum. However, since this concerns a photo site, sometimes images are wider than the container width of 1200px and the image breaks out of it. This is perfectly fine, I want the full image to be shown. However, I want the header and footer to scale to the widest element, in this case the image. This is not happening and is particularly troublesome when I resize the window to a width less than the image and then scroll to the right using the horizontal scrollbar: it leaves a clear gap on both the header and footer whilst I want them to stretch to at least the image/content width.
Simply setting the width to 100% is not enough as that concerns the viewport, not the content width. I can forcefully use min-width with a large value for the header and footer, but that leaves a horizontal scrollbar in normal resolutions. I could hide that scrollbar using overflow:hidden but that would chop of content and not display a scrollbar when the window is small.
To make a long story short, I guess what I want is that this layout would work as a table would work: if one column's content is wider than its size, it pushes all other rows to that same width. The largest width determines the total width. I prefer a solution without javascript, but am thinking it is either not possible or I am overseeing something very obvious?
100% width sets the element's width to 100% of the width of the element it is contained in. In your case, it seems this is the window itself (or the body element). To make the header and footer divs (I'm assuming you're using divs here) scale with the image, they will probably need to either be included in the same div that the image is in, or inside a div that the image div is also in, assuming that div is scaling to the correct width (don't assume it is scaling to fit the image).
However, in many cases using a table for your layout can be much cleaner, and will handle the type of horizontal scaling you're looking for without needing to resort to css hacks.
To make a long story short, I guess
what I want is that this layout would
work as a table would work
display: table on the common container of these elements, and display: table-row or table-cell on its children. This will not work in IE6, but clever things can be done with its CSS expression() hack to simulate this.
I would rather suggest, however, that you not set a maximum width at all, and allow the design to flow better according to the user's desired window size.