Questions tagged [css]

CSS, short for Cascading Style Sheets, is a language used to control the presentation of HTML and XHTML documents.

Filter by
Sorted by
Tagged with
3
votes
3answers
69 views

Modal button positioning on mobile

I am designing a design system for my company and am currently looking at designing the modals and dialogues for both desktop(tablet too) and mobile. I have placed the primary action to the bottom ...
0
votes
0answers
29 views

How to use Google's Noto web font for software in multiple languages [closed]

With regards to an accessibility concern, it looks like google Noto font is a good bet to use as it supports 800 languages. Is it just a case of changing the css code? For example, from Arabic to ...
2
votes
1answer
108 views

Is there any reason not to change the style of web radio buttons and check boxes?

It's still very difficult to change the visual look of HTML radio buttons and checkboxes using CSS. For example, changing the check box's border-color does nothing on major browsers. Is there a UX ...
1
vote
1answer
113 views

Material design and Material UI [closed]

Since I am new to Material design, I am having some clarification 1) What is material design? Common CSS material design framework? 2) Difference between material design and material UI? Material UI ...
0
votes
1answer
95 views

What is the best way to start designing this website? [closed]

I am new UI(ReactJS) Developer, I want to develop this webpage from scratch, however, I am not that experienced, hence, confused how to actually start. Should i start with logo or header or sidebar or ...
1
vote
1answer
108 views

Defining colour themes of gradient scales: should I use hex or RGBA? [closed]

I'm relatively new to CSS. I’m trying to figure out why my UX team sometimes defines colours with hex codes and sometimes uses RGBA. Context: We build highly technical, management web apps. All of ...
2
votes
0answers
40 views

Different border-radius in different field. Is it a good practice? [closed]

Using different border-radius for different fields (e.g. textboxes, buttons, cards) to make the curves looks similar. Curves on the large field doesn't look similar to small fields. Expected: What'...
1
vote
2answers
133 views

Is there a standard for indicating a high contrast style? [closed]

I am working on a web app and have developed both a normal stylesheet and a secondary high contrast stylesheet. I am coming unstuck when it comes to allowing a user to switch between styles. Is ...
1
vote
1answer
50 views

Should I use <aside> for off-canvas navigation? [closed]

I want to create an accessible off-canvas navigation and most tutorials say you should put it inside the <aside> element, however, since it is my main navigation which will appear on one line on ...
1
vote
3answers
95 views

Techniques for handling opening a new tab and ensuring web accessibility with WCAG 3.2

WCAG 3.2 indicates that content should be provided in a predictable format and that subsequently when a new tab is opened on a click that the user is made aware of this. I have a webpage with a list ...
0
votes
1answer
56 views

Why can't I type directly into the HTML with FF Dev Tools? [closed]

Hopefully this question isn't too oddly specific. Let me know if it belongs on ProWebmasters instead... I'm making some mock-ups in Photoshop, using screen shots from the site in its present state as ...
0
votes
1answer
78 views

How to improve a scrollable dropdown section issue [closed]

I have an issue where the overflow of a scrollable list on a website is cutting off my dropdown menu. The scrollable list has a height constraint because it is in a modal which has a set height and ...
1
vote
3answers
282 views

Ways to show a div has more content

I'm basically a back end devlopper but I need to create a page displaying data in diiferent tables. Some of the data rows may contain very large content but I chosed to make all rows the same height. ...
0
votes
1answer
53 views

Vice versa colors for on and off hover of buttons [closed]

How should we choose the color for buttons is there a should always be a dark and light colour or two differed colors. What will be the best strategy for choosing colours. And is it should always be ...
1
vote
2answers
153 views

Footer menu same as Menu

The links which are in the menu are replicated in the footer menu. Is placing same menu links in the footer redundant or is it a bad practice in web design or development?
2
votes
1answer
86 views

Cursor usage in different application elements

I am working on an application that is mostly used by desktop users. So I am trying to perfect the use of the cursor css-rules. First of all, I have read and try to follow the practice of having ...
1
vote
2answers
3k views

Double Scroll Bar on Website [closed]

A website I am responsible for: www.livingsalads.co.uk has a double scrollbar on most browsers (chrome anyways). Which is obviously an issue as it looks bad and also browsers sometimes use the ...
3
votes
1answer
252 views

Creating an accessible, animated, and responsive navigation system

I've been struggling for the past couple weeks to design the perfect navigation (menu) system for my personal website which I am designing. First, I need a system that is completely accessible as I ...
3
votes
2answers
183 views

How do i design website mockups when i already have a css framework in mind?

Do I choose the CSS framework first before designing the website mockups? Or is it the opposite. What if I finish designing the mockups, but the css framework isn't a perfect fit ?. Should I first ...
0
votes
1answer
86 views

When prototyping responsive web design, I have to consider how frontend dev. will do it: CSS Grid/Flexbox/Bootstrap?

My question context: I have to design a responsive website, that is now poorly responsive on bootstrap. I would like to start drawing IA of interface elements and how they act on several screen widths ...
0
votes
2answers
50 views

What is the best pattern for opening Mega Nav on touch device when parent Nav items are link to landing pages?

I have a mega menu opening on desktop, on hover over a parent nav strip. The parent nav items are links on click. The same menu is to be used on landscape tablet. Without on hover, click is used to ...
0
votes
1answer
132 views

UI element names and hierarchy for web SaaS B2B application [closed]

I´m building an ReactJS based library of web elements for a SaaS B2B application. I know this is common, but I´m having lots of difficulties choosing right names for my visual hierarchy. What I call ...
2
votes
3answers
818 views

Should entire checklist row be clickable or only checkbox and label?

In a form checklist, should whitespace beyond the label text be clickable? Or only the checkbox and label itself? Demo here. choice choice choice
4
votes
2answers
420 views

File Browser Download

We provide a service to synchronize devices with our server. Every device has a file browser which is accessible through HTTP. Possible actions are: Download, Delete and Rename. Delete and Rename ...
47
votes
8answers
9k views

How to enable users to insert an infinity number

I am designing a web page which give admin users the opportunity to manage the users below them. in one section of this admin page, the admin user is required to fill out how many queries he permits ...
5
votes
2answers
367 views

Science behind spacing

I'm aware that this question will be very vague, but I'll put it out there at the chance that someone will know what I'm talking about. I recently read an article about the science behind spacing and ...
5
votes
4answers
3k views

Marking box as expandable box intuitivly

I designed a site with several boxes (which located one under the other). Each box contains information about a specific topic- a title (the name of the subject) and a text (the explanation of this ...
1
vote
1answer
139 views

Best way to display failed login from a nav login

I want to do a login for users that is strictly in the nav. If the user hasn't logged in, they can always login in from the nav. One thing I have noticed is that websites like Facebook and GoodReads ...
75
votes
8answers
23k views

Why don't <button> HTML elements have a CSS cursor pointer by default?

A friend was asking me why <button> HTML elements don't have a CSS cursor pointer by default? It is the default behavior for links, and can be achieved on a button with button { cursor:pointer;...
0
votes
2answers
256 views

how better place back button?

Our main goal is, to keep the ability to go back SOMEWHERE but we don’t want it to be too prominent. Where should we put that button? This is the link to the live page where this button called 'Ürün ...
0
votes
1answer
144 views

What are the benefits and drawbacks of using 2 or more CSS Framework? [closed]

I have experience in Bootstrap, Foundation, and Sematic UI. On my next application, I am planning to use Bootstrap for Grid Foundation for Menu & Side nav Semantic UI for Forms, icons, etc. ...
0
votes
1answer
103 views

How can I design my form better? [closed]

I have a price calculation form which looks very basic. I want to make it look little better. Like the '+' and '-' button look like bootstrap button and having a shadow. I also want to have a subtle ...
2
votes
1answer
548 views

Standard numbers for responsive layout

What are the (standard) numbers to work with, when making css responsive layout? @media screen and (min-width: px) { /* Mobile */ } @media screen and (min-width: px) { /* Tablet */ } @media ...
2
votes
5answers
223 views

Solution to two merging backgrounds

The Item management is part of a dropdown menu and the Author is part of a heading list. But since both have the same black background, it looks like Item management and Author are part of the same ...
6
votes
1answer
3k views

Tooltip CSS cursor

I am at a bit of a loss as to what cursor I should be using for tooltips that have no click through behaviour. I have a hover only tooltip are I currently use the CSS cursor: cursor: pointer However ...
0
votes
1answer
187 views

Tips for “better” white space

I am currently working on the front end of a key server. The problem that I am having, is that i have got many pages, which do not hold much information and I do not know, how I can fill out the white ...
0
votes
3answers
766 views

Use of Max-Width In Fluid (Or Responsive) Web Design

I see that a lot of fluid websites use a min-width and max-width property on their web pages designed mainly for desktop. When the browser width is less than min-width, content stops shrinking and the ...
0
votes
2answers
67 views

Exploratory Interface across Mobile Devices

I'm working on a site were the features are shown as exploratory items (http://codepen.io/sevenearths/pen/rWzgba). This all works well on computers where users can hover over elements and additional ...
13
votes
2answers
3k views

Why is the Google Search Results page not responsive? [closed]

As every web developer/designer, I read many articles about why responsive web design is important. We are also often told, that you can learn a lot by observing the UI (and optionally the code itself)...
2
votes
2answers
912 views

Is there a pattern for an HTML select box that provides existing hardcoded values but also needs to be able to take custom input?

I have a menu of reference information, like below. download bmml source – Wireframes created with Balsamiq Mockups The above fields are progressively pre-populated by the system, and user has ...
1
vote
3answers
270 views

Best table layout to compare definitions and examples (text)

I want to present a table that compares correct and incorrect definitions of words, with examples. What is the best table layout for this? Eg Too Correct: More than expected; also. Example: I, too, ...
6
votes
2answers
977 views

Accessibility color difference best practices

I was planning on using #663399 and #f8f8f8 as a foreground and background color. The Color Contrast Tool, like others, is passing the contrast ratio as described by WCAG, but is failing color ...
1
vote
2answers
299 views

What is the best UI for dashboard?

I am currently working on a project which requires a user dashboard. I'm toying between two options. My main concern with a minimalistic layout is that it is a waste of clicks. I'm a huge fan of ...
3
votes
2answers
298 views

Responsive Web Design based on physical size?

The current practice of using media queries via pixel-thresholds is fine, but what if someone decided to use their 50-inch 4k tv as a vertical monitor and actually sit really close to it? I could see ...
2
votes
0answers
167 views

I need horizontal scroll bar with fixed width and right side checkbox [closed]

I need horizontal scroll bar with fixed width and right side check box. Currently I truncate the text, but I need horizontal scroll without truncate. Refer my sample page is here:- https://jsfiddle....
0
votes
3answers
1k views

How to make a close button “X” stand out from a image [closed]

I have an image looks like satellite map where I want to put a close button at the top right corner. What I have now is just a span with "X". It's an 100% overlay on a popup so clicking outside ...
0
votes
2answers
151 views

Color scheme for 1-4 ratings

I am task with shading the table cells containing ratings: Good (1) , Better (2), Best (3), Gold (4) or blank (as in not rated). It is possible that in the future another rating would be added - ...
9
votes
4answers
3k views

Where does Business Analyst fits in core UX/UI technology flow

User Experience (UX) Designer = Research + Design UI Developer = Design + HTML/CSS/JS Application Developer = HTML/CSS/JS + Back-End coding With reference to above diagram i would like to know ...
1
vote
1answer
47 views

Should I use labels for geographic locations?

I have a website similar to craigslist for online classified media. I redesigned a list of items now using semantic-ui and labels for the geography. Would it be better to use breadcrumbs e g Georgia &...
0
votes
3answers
129 views

How do I make extremely basic data look presentable? [closed]

I have a modal that is so boring and ugly I cannot stand to look at it. In a user table, the user can press a button to view all details about the user (the table only shows name, role, etc). This ...