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
26
votes
12 answers

Can't make chart js responsive

sorry if I missed anything to fix my issue, I've read and tried many solutions without any of them being adapted to the problem. I have several charts (from chart.js) on a single page, but I can't succeed to make them responsive, despite…
Blue Agency
  • 608
  • 2
  • 7
  • 14
22
votes
3 answers

make btn-group responsive

I have a very long list of buttons and I need to group them, but also display them nicely. And right now, The design doesn't split in rows. I have bootstrap 4
Robert Rouge
  • 259
  • 1
  • 2
  • 9
22
votes
4 answers

react material ui not responsive when opened in mobile browser

I'm trying to build a mobile web application using react material ui library. But it seems the material UI components are not responsive. They display very well on desktop, but when I open it on my mobile browser, the fonts are very small. Isn't…
Aaron Shen
  • 8,124
  • 10
  • 44
  • 86
19
votes
4 answers

How to make a div cover the whole screen

I have a question. I got this so far: I basically want the highlighted div to cover your device screen no matter how big the device screen is. now i see 2 different divs when i open this on my phone. i only want to see the one that is…
Kevin
  • 930
  • 3
  • 13
  • 34
18
votes
1 answer

When rotating an iPhone X to landscape, white space appears to the left and below cover image

A weird problem occurred today. While testing a simple "coming soon" page my background image on my iPhone X is not filling the entire viewport when rotating to landscape. Tested in Chrome and Safari. A simplified example that produces the…
Tim Wickstrom
  • 5,476
  • 3
  • 25
  • 33
18
votes
1 answer

CSS-Grid instead of
Is it good practice to use CSS display: grid instead of the html tag
? There are many times when
in responsive design is difficult to use. Especially for complex shop basket tables and handling colspan etc. However with css-grid it's…
kingmauri
  • 345
  • 1
  • 3
  • 9
17
votes
8 answers

Responsive breakpoints not working for slick slider

I have implemented slick slider which works fine without resizing the browser. But when I resize the browser to 1024 then the responsive breakpoint settings doesn't work. jQuery: $('.slider').slick({ centerMode: true, slidesToShow: 1, …
Prithviraj Mitra
  • 11,002
  • 13
  • 58
  • 99
16
votes
5 answers

Set min-width to width of contents

I have a div with a background that contains a table. I want the div to have 100% width, except when that is narrower than the table is long. I can do something like this: .my-div { width:100%; min-width:900px; } That's great for a table that…
Joshua Clark
  • 1,346
  • 3
  • 14
  • 24
15
votes
5 answers

How to make the GridList component in React Material-UI responsive

I'm using the Material-UI version 1 to make the grid UI in my React application. I want to make the grid responsive. The GridList component API has cols props, which by default is 2. For example, it could looks like this below.
sflow
  • 655
  • 2
  • 8
  • 18
15
votes
3 answers

Keep image ratio using max-width and max-height in IE 11

I'm trying to get an image to fit inside a container while keeping it's size ratio. The image should take full height or width depending on orientation. My solution does work on all browsers I've tested but IE11(works in 10 and 9 surprisingly). In…
Mosset Jérémie
  • 310
  • 1
  • 4
  • 20
15
votes
2 answers

How can I slide the sidebar out of view and make the content flexbox resize to fill the void?

My flexbox layout is based on Philip Walton's Holy Grail Layout. I'm trying to create a slide in/slide out navigation sidebar much like these but using flexbox layout, not absolute positioned divs. I've seen many flexbox sliding menus such as this…
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
  • 2,754
  • 1
  • 26
  • 39
14
votes
8 answers

Calculate height of div based off width & maintain proportion

I am looking for a pure CSS solution to what I have here done using jQuery to help. Basically I have 3 divs that spread evenly in width in a container. They maintain a 3/4 ration with the height being calculated off of the width. Furthermore, each…
drooh
  • 578
  • 4
  • 18
  • 46
14
votes
1 answer

Responsive Inline SVG using Bootstrap

How to make an inline svg icon responsive using Bootstrap? Here is a sample code: Mute…
ssk
  • 9,045
  • 26
  • 96
  • 169
14
votes
3 answers

How to make text responsive to div size?

I'm building an e-commerce website. All products are displayed in separate divs. I have one problem: In each product's Div, I want to display a part of the product description. When the product description is longer than the div, it simply displays…
Joris416
  • 4,751
  • 5
  • 32
  • 59
13
votes
3 answers

How to center modal with transition on material ui and make it responsive?

I trying to use modal with transition using Material UI and have problem to centering it and also make it responsive or center in small size screen (mobile). Modal can be centered and looks good on small size if not using transition, but if i add a…
Ras
  • 991
  • 3
  • 13
  • 24
1
2
3
…
99 100