Questions tagged [responsiveness]

Responsiveness describes the ability of an UI element or dialog to respond on user interaction within an acceptable time frame.

Responsiveness describes the ability of an UI element or dialog to respond on user interaction within an acceptable time frame.

413 questions
15
votes
2 answers

How to set responsive image's max width (Bootstrap 4)?

Question: How do you set the max-width of an image in Bootstrap 4 while retaining the image's responsiveness? Background: Boostrap 4's .img-fluid class makes images responsive. max-width: 100%; and height: auto; are applied to the image so…
daCoda
  • 3,583
  • 5
  • 33
  • 38
14
votes
1 answer

Responsive Semantic UI React Grid, Columns, Rows

I'm having trouble making Semantic UI React grid fully responsive, at least respond the way I want for Desktop, Tablet and Mobile. I have following three components which I am rendering in Grid Columns. import React,{ Component } from…
12
votes
2 answers

How to use breakpoints from MUI?

I want to make my project responsive by using MUI breakpoints, but I don't get how to use them in a simple way, I think creating a const styles as they explained in their documents is not a simple and handy way for beginners! I'd appreciate if you…
9
votes
1 answer

How to create responsive layouts with Jetpack Compose?

In the traditional view system, I handled responsiveness by using bias/guidelines/weights/wrap_content/avoiding hard coding dimensions/placing views relative to each other in Constraint Layout, using 'sdp' and 'ssp' etc. How do I create responsive…
Sparsh Dutta
  • 2,450
  • 4
  • 27
  • 54
9
votes
1 answer

PayPal parallel adaptive payment verification is not remembering the buyer

I have the following requirements: The PayPal verification screen remembers the buyer between transactions. The layout of PayPal verification screen is suitable for mobile devices (responsive layout). Parallel payments (2 and more receivers). Apple…
9
votes
5 answers

Div re-order with CSS

Does anybody know of any examples or tutorials on how to achieve the below: On desktop the layout will be: On mobile the layout will change to: As you can see, I want box 2 and box 3 to re-order and swap positions on mobile Does anybody have any…
user3615681
  • 271
  • 1
  • 4
  • 13
8
votes
2 answers

Fullpage.js and mobile devices: How to enable section / slide switch if content overflow must be enabled?

After experimenting with some of the options I still did not get satisfying result: The used Javascript library is FullpageJS (http://alvarotrigo.com/fullPage/) Fullpage.js is initialized with the following settings: $('#fullpage').fullpage({ …
Blackbam
  • 17,496
  • 26
  • 97
  • 150
8
votes
3 answers

Can I have bootstrap columns go to next row two by two on smaller screens?

I have this html code:
Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg …
ivanacorovic
  • 2,669
  • 4
  • 30
  • 46
7
votes
2 answers

React-native responsive font size

I am developing a tablet app (Android and iOS) with Expo and React-Native. I managed to make the layout responsive without getting into any problems. After running the app on different size devices, i noticed that i forgot about font size…
john doe
  • 161
  • 1
  • 1
  • 15
7
votes
2 answers

How to specify responsive column width for table in Bootstrap v4

In Bootstrap 3, I can easily design responsive sensitive table. I can split columns into their grid system. More than that I can hide some column for small devices. Here is my example. The table has 13 columns. The first two columns have 25% width…
stanleyxu2005
  • 8,081
  • 14
  • 59
  • 94
7
votes
6 answers

How to test html file for mobile responsiveness

I need to test an html file for mobile responsiveness, but all the resources I have found to do this need a URL or a localhost, is there any way to test responsiveness with just an html file?
user5372593
7
votes
2 answers

Bootstrap Mobile Not Working

I have worked with Bootstrap many times, and have only seen this issue when my meta viewport tag is missing. However, that is loaded, and I am still experiencing issues with Bootstrap on mobile devices. Might anyone know what else could be causing…
Lauren F
  • 1,282
  • 4
  • 18
  • 29
6
votes
4 answers

MaterializeCSS how can i make row column height the same?

I have a basic grid on materializeCSS my problem is my column is not the same height so my layout became a mess. I know this has been ask on bootstrap but none of the solution works for me in materializeCSS This is my jsfiddle…
Lloyd
  • 144
  • 1
  • 1
  • 11
6
votes
2 answers

How to calculate padding-top in % of the given div relative to its parent div

Problem: I want to add padding-top in % to all list items (because I need to move the text a little down and also need all elements to be scalable), here is jsfiddle code Height works fine. In order to calculate height I calculated the percentage of…
user5589607
6
votes
2 answers

SVG Responsive Text

I have an SVG within a web page, it consists of images + text Timeline All the images are responsive, but the text isn't, so…
Gaza
  • 427
  • 2
  • 4
  • 17
1
2 3
27 28