Stack Overflow
Stack Overflow

Questions tagged [responsive]

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.

5039 questions
12
votes
3 answers

Material UI breakpoints to set orientation: portrait and landscape view

Would like to be able to set portrait and landscape views on the styles object for tablets in Material UI const styles = theme => ({ root: { padding: theme.spacing.unit, [theme.breakpoints.up('md')]: { backgroundColor:…
Julio Cornelio
  • 171
  • 1
  • 2
  • 6
12
votes
4 answers

Making a persistent background image while staying responsive in Flutter

I'm creating a login screen, and i have this background image, the problem is when the user clicks one of the TextFields and the keyboard pops, the background image changes its size to fit the new screen size (excluding the keyboard). I want the…
argamanza
  • 1,122
  • 3
  • 14
  • 36
12
votes
3 answers

Height doesn't properly work on IOS (iphone)

I've created this website on codepen. While trying to make it responsive for all platforms I ran into a problem. It appears a single div covers the whole page (only on IOS) and not all heights are working properly (meaning nothing fits). I've been…
Salman
  • 1,109
  • 3
  • 25
  • 55
11
votes
3 answers

How can I make a bulma table responsive?

I am using the Bulma CSS framework and specifically I am trying to make the table in it responsive. I have tried giving it a width: 100%; and applying overflow-x: auto; but it doesn't seem to work. Here is the demo:…
Anonymous
  • 1,658
  • 2
  • 14
  • 19
11
votes
3 answers

Foundation is not responsive on Safari and iphone

My website breaks mysteriously on safari, is not responsive (foundation zurb worked on any other browser so far). This happens even when i don't use the js boundle. This catastrophe is online: http://diet.paperide.com I have no clue of the why!…
DavidC
  • 218
  • 1
  • 12
10
votes
2 answers

Material UI responsive based on element size

I'm using React and MaterialUI to build a system that will display widgets inside another (not React-based) web site. I'd like to make the widgets responsive, but they need to respond to their own container width rather than the window width, as I…
Marten Jacobs
  • 199
  • 1
  • 9
10
votes
4 answers

Detect dynamic media queries with JavaScript without hardcoding the breakpoint widths in the script?

I've been searching for a lightweight, flexible, cross-browser solution for accessing CSS Media Queries in JavaScript, without the CSS breakpoints being repeated in the JavaScript code. CSS-tricks posted a CSS3 animations-based solution, which…
Timmah
  • 1,283
  • 2
  • 10
  • 26
10
votes
2 answers

Mobile media queries in landscape mode?

My mobile media queries dont work in landscape mode, maybe I am not displaying media only screen right. I am not using any frameworks , just regular CSS... Could someone point me in the right direction? Thanks in advance this is what I have right…
Ris
  • 1,892
  • 9
  • 26
  • 43
9
votes
2 answers

Horizontal full width with overflow in vertical flexbox

I'm trying to create a flexbox that is both horizontally as vertically scrollable in case its needed. It's kind of a table layout in flexbox. In the picture below you can see the concept that I'm trying to achieve. This works correctly when the…
markieo
  • 484
  • 3
  • 14
8
votes
3 answers

Responsive imageList in MUI?

I want to decrease the amount of imageList columns depending on the display width (a.k.a. media query) but it doesn't work properly. For example: {images.map((image) => ( …
Glucus
  • 89
  • 1
  • 3
8
votes
1 answer

How to test different screen widths using Jest

Does anybody know how to test different screen widths or responsiveness of a React component using Jest? I have been searching for a proper way of doing this, but none of the solutions have been working for me. For instance, I found someone suggest…
Jpark9061
  • 924
  • 3
  • 11
  • 26
8
votes
1 answer

semantic-ui-react not working for

I am using semantic-ui react to render a table of data. My requirement is that when the page is on mobile view, I hide certain columns. I tried using className="mobile hidden" on the Table.Cell element but this doesn't seem to work at all. Then I…
rex
  • 3,133
  • 6
  • 35
  • 62
8
votes
2 answers

How to make scrollable mat-list

I'm trying to build a mat-list inside a responsive height container with Angular 4.4.6 and Angular Material 2.0.0-beta.12. How can I make the mat-list scrollable without overflowing parent container? Here's the stackblitz URL:…
Halil İbrahim Karaalp
  • 1,290
  • 1
  • 13
  • 24
8
votes
1 answer

semantic-ui hide element for mobile view

I am looking for semantic-ui the correct class to hide for example a DIV in mobile view. In Bootstrap its easy there we have "visible-xs" and "hidden-xs". But on semantic ui I only found "mobile only grid"
squashpat
  • 200
  • 10
8
votes
1 answer

CSS hide first li separator on each line - responsive horizontal css menu

Is there a way to hide the separator in the first element on each line? I have a responsive horizontal menu that adds extra lines when the window becomes smaller. To make matters worse, the end user can add and remove items from this menu, or just…
user6742604
1 2
3
…
99 100