Responsive is a tag to indicate a generic responsive website or web application programming or design topic. It's a more generic tag than 'responsive-design', and it serves for situations when you're specifically writing about programming (usually html/css/js). The word 'responsive' itself refers to the ability of a web application/website to respond and adapt its dimensions and interactivity across a wide range of devices and screen sizes.
Questions tagged [responsive]
5039 questions
510
votes
26 answers
How to make a div fill a remaining horizontal space?
I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.
#search {
width: 160px;
height: 25px;
float: left;
…
alexchenco
- 53,565
- 76
- 241
- 413
217
votes
13 answers
176
votes
24 answers
How to make flutter app responsive according to different screen size?
I am facing difficulties to make it responsive according to various screen sizes. How to make it responsive?
@override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(color:…
praveen Dp
- 2,766
- 4
- 22
- 26
99
votes
9 answers
100% width background image with an 'auto' height
I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it always going from edge to edge). Depending on the width…
Darryl Young
- 2,145
- 2
- 20
- 19
88
votes
4 answers
How can I respond to the width of an auto-sized DOM element in React?
I have a complex web page using React components, and am trying to convert the page from a static layout to a more responsive, resizable layout. However, I keep running into limitations with React, and am wondering if there's a standard pattern for…
Steve Hollasch
- 2,011
- 1
- 20
- 18
65
votes
4 answers
Media queries in Sass
I am wondering if there is a way to write media queries in sass, so I can give a certain style between let's say: 300px to 900px
in css it looks like this
@media only screen and (min-width: 300px) and (max-width: 900px){
}
I know I can write…
Maciej S.
- 1,773
- 3
- 12
- 12
57
votes
9 answers
How to detect if screen size has changed to mobile in React?
I am developing a web app with React and need to detect when the screen size has entered the mobile break-point in order to change the state.
Specifically I need my sidenav to be collapsed when the user enters mobile mode and that is controlled with…
Embedded_Mugs
- 2,132
- 3
- 21
- 33
48
votes
8 answers
How to prevent iOS keyboard from pushing the view off screen with CSS or JS
I have a responsive web page that opens a modal when you tap a button. When the modal opens, it is set to take up the full width and height of the page using fixed positioning. The modal also has an input field in it.
On iOS devices, when the input…
rescuecreative
- 3,607
- 3
- 18
- 28
41
votes
5 answers
How to detect ONLY with CSS mobile screens
I've found a lot of threads here talking about CSS and mobile screens.
After searching, I couldn't find a solution for some devices. For example: Motorola Moto G4 Plus uses FULL HD width(1080px), only bootstraps detect the xs-view…
Max
- 413
- 1
- 4
- 4
36
votes
4 answers
Tailwind CSS - Responsive breakpoints as components
How should I deal with responsive breakpoints as components in Tailwind?
Without Tailwind, I used to declare breakpoints as a scss mixins:
@mixin tablet-portrait {
@media (min-width: 700px) {
@content;
}
}
Then:
@include tablet-portrait {
…
aitor
- 2,281
- 3
- 22
- 44
36
votes
3 answers
How can I make my ngx-line-chart responsive?
I'm using ngx-admin and I'm trying to make my ngx-line-chart responsive.
My chart is in a nb-card, and when I resize the window the nb-card is totaly responsive. So I want my chart to be resized to fit inside the nb-card.
My html code:
Loufi
- 1,215
- 1
- 8
- 23
35
votes
15 answers
Fit website background image to screen size
I'm just starting on a website and I already encounter a small problem where I can't find a specific solution to.
I wanted to make my website background fit any screen size in width, height does not matter.
This is the link to my image:
…
Tim
- 401
- 1
- 5
- 7
31
votes
1 answer
Is fastclick js still needed?
I mean this:
https://github.com/ftlabs/fastclick
Is it still needed and important?
I know there are things related to viewport declarations concerning certain browsers. But It seems they are old things, and what about the other browsers…
Luca Reghellin
- 7,426
- 12
- 73
- 118
28
votes
2 answers
React responsive layout without CSS
I'm wondering what is the best approach to implement layouting in React app.
Basics
Let's say we want to have 4 components laid out in simple grid. The most basic way would be something like this.
27
votes
1 answer
How to change the flex order when wrapping?
I would like to achieve something that renders like this, depending on the screen size:
+---------------------------+
| A | B | C |
+---------------------------+
+---------------+
| A | C |
| B …
Arthur
- 4,093
- 3
- 17
- 28