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
8
votes
1 answer
Responsive image, picture vs img with srcset, fallback issue
After reading all day about one method or the other I am still not sure what is the best for me, all sites explain the same thing but when I want to know the things that really worries me, nobody talks about that.
My case: I have almost all my…
AngelLestat
- 127
- 2
- 7
8
votes
3 answers
Background image blurry on mobile ios
This is probably a rookie question however, I cannot seem to find any solution to the problem that I am having. On my website I have a background image that renders totally fine on desktop at any screen size but becomes a blurred mess when viewed on…
kgoode517
- 103
- 1
- 9
8
votes
1 answer
What is the effect of setting meta viewport tag with `height=device-height`?
I understand that the default behavior of iOS regarding device-width might be to try to render websites using a viewport width of 980px, and setting width=device-width might be useful (particularly if you are developping a…
Sebastien Lorber
- 89,644
- 67
- 288
- 419
7
votes
2 answers
How to make image responsive in Material-UI
I am trying to make a page responsive but, I am not able to make an image responsive as it is getting off the grid container in material UI. Is there a way I can make the image responsive?
I am trying to add the image in Grid container, Still, it is…
Tanish Gupta
- 400
- 2
- 8
- 20
7
votes
2 answers
How To Serve Image Size Based on Container, Not Screen Size
I've been scouring responsive image posts and examples, but I can't find a solution. It seems like this should be easy, I might just be missing something: How would I serve the appropriate image size based on container width rather than screen…
Alteredorange
- 556
- 1
- 6
- 23
7
votes
4 answers
Why `1vh` CSS size resolve to different pixel size on screen
I have three div with same heights equal to 1vh`.
My problem is they appear with different pixel size on screen. Sometimes they look equal but sometimes not, specially it happens after viewport resizing. Please run the snippet to see.
.samples…
Makan
- 641
- 8
- 13
7
votes
0 answers
SwiftUI: Testing on iPhone 8 cuts part of the view, Adding to much height on certain components leads to white screen
I've been working on a project and using the simulator and preview with everything going well until I've loaded the app to my iPhone X. The result was a white Screen. It seems if I add to many components that exceeds the height of the screen the App…
Blaj Bogdan
- 415
- 1
- 3
- 17
7
votes
1 answer
bulma - adjusting typography sizing efficiently
I'm having a hard time figuring out the most efficient way to resize text for mobile. I know per the documentation, making the text size responsive to the screen is fairly straightforward, simply add the is-size-*-mobile class to an element to reset…
themantalope
- 1,040
- 11
- 42
7
votes
4 answers
Is angular responsive by default?
I have an application developed in Angular 4 and its not responsive so want to know if:
1. The latest version of Angular responsive by default.
2. What is the best approach to make an angular 4 application responsive. Bootstrap or media queries? or…
Yogesh
- 246
- 1
- 4
- 20
7
votes
2 answers
Why is Chrome shrinking the view in responsive mode?
I have a page that is supposed to be responsive and it also has a viewport tag for mobile devices as below.
Sunil
- 20,653
- 28
- 112
- 197
7
votes
1 answer
how to make padding responsive in mobile view?
I'm using wordpress and I used CSS to make the width of my 'About' and 'Contact' page more centered and smaller by adding padding. However, when I do this, in the mobile view especially (I think tablet is okay), there is white space on both sides…
user124889
- 79
- 1
- 1
- 6
7
votes
2 answers
Why are my flex items not wrapping?
So I have added 3 images within their own flex-item divs, and they all sit inside a flex-container div, the images scale as I make the browser window smaller, however they all remain inline rather than wrapping and becoming a single column, any idea…
AKL012
- 399
- 5
- 14
7
votes
3 answers
multi-item responsive carousel for angular material
I'm trying to create a multi item responsive slider in AngularJS. I'm familiar with Owl Carousel (https://owlcarousel2.github.io/OwlCarousel2/) and Slick Slider (http://kenwheeler.github.io/slick/), but both use jQuery and I want something without…
William Scott
- 319
- 1
- 5
- 14
7
votes
1 answer
screen.lockOrientation is not a function
I would like to use the API screen in Js with chrome.
if ( navigator.userAgent.match( /(android|iphone)/gi ) ) {
if ( 'orientation' in screen ) {
//console.log( '// API supported, yeah!' );
//console.log( 'new…
Seb
- 404
- 2
- 4
- 14
7
votes
4 answers
Load an image only for mobile device
I want to know if it is possible for my front page to load an image dedicated for mobile users only. I know it is possible with javascript, but I want to know if I can achieve the same using CSS only. I have tried to do some research but can't find…
S.Reyes
- 91
- 1
- 6