Basically I am writing a web application (using Bootstrap so it's responsive) that will accessed using tiny hand held scanners specifically this one:
https://www.zebra.com/us/en/products/spec-sheets/mobile-computers/handheld/tc25.html
I need to make sure that the display works for both desktops and the handhelds so knowing this is important.
On there it has the display spec as "4.3 in. color WVGA (800x480); LED backlight; Corning Gorilla Glass"
Now when using chrome tools (emulated devices) I need to put the width and height in (I'm doing this to make sure the CSS is automatically adjusting correctly). Now what I need to know is the width and height.
I thought the first number (800) was suppose to be the width and the second number should be the height (800) but that can't be correct, unless they have put the spec back to front on their website?
I suspect that it should be in chrome tools 480 X 800 as that looks far more realistic. Would someone correct me here or point out if I'm missing something obvious?
Here is a picture of both devices configuration in Chrome:
And here is the other dimension (which is believe to be the wrong one!)
When I try to research this question or find out myself I keep being told the first dimension is the width which just doesn't look right.
And this is the picture is the device itself:
the first number represents the horizontally and the second one is for the vertically.
you can find out by dragging the responsive window and see which number changes.
I'm working on a website over here:
venuslabs.org
Some of the tabs, such as "Technology Details (pdf)" and "Venus Needs Advocates (Take Part!)" create a number of subwindows in the middle. Their sizes are based on em, so that they scale properly if the user changes their font size / zoom level (as I understand is "best practices" today).
The way they are looks fine... most of the time. But when viewed on a cell phone in horizontal (not vertical) layout, they're just too big and overlap the top bar. So it appears that the current layout is fine down to a certain height, but below that height I need to have the font size scale linearly with page height (with the subwindows scaling along with the font size).
Obviously I could do that with javascript, but I know you're supposed to do things in pure CSS where possible. What would be the recommended approach? I've been trying a number of things and none have really played out.
I am working on my first website and I encountered a problem with the responsiveness of the fields in my search form. I use Wordpress theme and plug-ins and I am overriding their styles with my own.
The field groups for "Price"and "Build-Up Area" don't behave as expected when I change the size of the browser window. I created media queries for every browser size which breaks the structure, but it seems that I need about 10 separate queries, even more, which I consider as inappropriate.
(e.g. I have a query for max-width 780px and then it appears that I have to create another one for max-width 767px, because for that browser size the structure is broken again) .
I have red the original CSS code of the theme/plug-in, but I can't understand where the problem comes from.
What am I doing wrong?
Thank you in advance!
my website
Dont write css as per window size. Set the width in % for all screensize. For mobile, show the input field as one by one width as 100%.
I have a QT form that has literally hundreds of widgets and to make them all fit on the screen at once (as required) I need to make them pretty small. The Form will have fixed (non resizable) size when used. I can resize the widgets to the desired height/width and use the appropriate (small) font size, make their size policy "fixed" etc. However, as soon as I start putting them into layouts, they gow to some, much larger minimum size. This is particularly true for the height of the widgets, but width is sometimes affectged as well.
My problem would be solved if I knew how to do one of the three following things:
Change a layout's default minimum size(s) for widgets.
Force a layout not to alter widgets sizes.
Use Qt designer to nicely align widgets in grid-like formats without using layouts.
I searched extensively Qt designer's docs and SO, to no avail.
Help is greatly appreciated
Use layouts with QWidget::setFixedSize in code (or alternative you can set the fixed size policy for each widget in designer) or you can use QLayout::setSizeConstraint
I'm redesigning my site because looks awful on different resolutions (apart devices), most guides and tutorials rely on % and em than fixed values. I'm still learning this so I'm reading everything around.
Thought this would solve the question with different display sizes but again: we have to craft some more CSS for fix some specific issues.
If I need to add media-queries for extra display sizes, why use % then? Do use % really reduce coding? Is ok need to add some extra css for some sizes or am I doing something wrong?
Thanks for any advice!
The purpose of using em sizes is to allow the base your design off of the user's choice of font size. I may use a larger font size because I have a huge monitor and poor eye sight, while someone else might prefer a smaller font. By using em units, your design will accommodate both of our font preferences and resize accordingly instead of forcing the font size to a given standard (eg. "12 point font").
In a similar manner, percent (%) units allow your design to respond to different browser sizes. Used in conjunction with em units, this will allow text-based elements to respond to arbitrary font size choices, and layout elements to respond to arbitrary browser sizes.
It is perfectly acceptable to design a single responsive design for all media types. Media queries are intended when you want different display styles on different devices, not to "support" different display sizes. An example would be to use serif fonts on print media and sans-serif fonts on display media, since usabilities studies have shown that these font faces are preferred for these sorts of media.
Furthermore, it allows you to do custom styling for some situations like mobile devices, where you may want to consider that the user has a limited amount of bandwidth and maybe cut down on extra images. Or if you want to display your content in a completely different layout for the microscopic screen afforded by certain phones.
% allows your site to be responsive to the user's method of viewing. Let's say you have a div that's at 100%. It'll fill the entire section, regardless if it's on a phone or desktop.
It should be okay to add extra CSS for sizes as well. As far as I know, you can have some elements display in % and some with a fixed px value, although they might conflict depending on how the page is setup or what it is being viewed with.
For example.
Your website header have the width of 950px; But in a mobile device, it may fit at 450px;
So, you use media-query to reposition some elements and handle some size issues and set the header width to 450px;
But, if you use % values, you can set your header div to have 100% of width base in its parent. So you can only change the body or some container div width, the all childs going to adapt.
Diana,
I am glad I came across this question. I literally just uploaded my first responsive design which is 90% based off of percentages when it comes to font-size and widths.
Check out the below:
http://www.noxinnovations.com/portfolio/responsive/
Obviously, it doesn't look amazing, and the image looks way out of place... But do me a favor and resize your browser window, by slowly making it smaller and smaller. I did that by setting a percentage width!
Trust me, I tried doing this responsive design test with pixels, and it didn't turn out too well. The percentage width ensures that regardless of the resolution and or pixel dimensions (per se) the design will always cater to the size of the screen. Also, I did not have to use one CSS3 Media Query, but I would highly suggest using CSS3 Media Queries only when you need them.
In my opinion, I should probably have a Media Query for a larger screen.
I hope this helps you as much as it has helped me!
Thank you,
Aaron