Category "responsive-design"

Certain media queries in my code isn't working, any suggestions on how to solve this? For instance the 320px and the 360px media query isn't working

The 320px media query is not working. The 360px media query is not working. But the other media queries are working. Any suggestions on how to resolve this?

Responsive Typography in Angular Material

Trying to figure out how to set font size of mat-tab-label based on screen size (below 400px). I tried putting custom configs in different media queries like t

HTML5 Picture element does not seem to be supported by Chrome 52? Srcset not working

I just started a new webpage so there's not much markup to go over. I set this down: <picture> <source media="(min-width: 1000px)" s

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)

<source> media attribute - width of container rather than screen?

I'm using the <picture></picture> tag to responsively display an image after assessing the size of the container it's in. Some example code: <p

How to make scrollable pop up box?

https://codepen.io/anon/pen/dWaWor When I click on the button "Creation Process" I cannot scroll in the lightbox. The lightbox has a fixed position because wh

Putting -moz-available and -webkit-fill-available in one width (CSS property)

I want to make the width of the footer browser-independent. For Mozilla I want to use the value of -moz-available, and when a user uses Opera, then CSS should g

Background image not showing in Safari

I am working on a responsive design and the class "bgMainpage" is having a background image but it is not showing on Safari on all the devices. I have applied b

Shrink a YouTube video to responsive width

I have a YouTube video embedded on our website and when I shrink the screen to tablet or phone sizes it stops shrinking at around 560px in width. Is this standa

Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1: body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em;

Trouble with sticky footer, 2 column responsive layout with wide browser support

I need to create the following layout: Two equal height columns Sticky footer (positioned at bottom in light content, pushed off page in heavy content) Responsi

How to reload a div for equal height child on window resize

I wrote a script to give equal height to child elements of wrapper. It is working fine on page load, but when I resize or change the orientation of my iPad, the

Responsive image slider using picture element?

Does anyone know of an open source code or snippet example of a responsive image slider with < > navigation controls that uses picture element when resi

jQuery - Execute scripts based on screen size

Is it possible to only run certain jQuery scripts if the screen/device size is above xxx pixels wide? So, for example, I only want to run a slideshow when peop