1

I want to create a page to test responsive layout of a page in my application, however media queries only work with window resolution, is there any way to apply CSS while changing the width of parent element.

For example:

<html>
<head>
<style>
    .child-element{font-size: 30px};

    @media screen and (max-width:768px) {
        .child-element{font-size: 24px}
    }
</style>
</head>
<body>
<div class="parent-element">
    <div class="child-element">Heading 1</div>
</div>
</body>
</html>

Now I want to child-element style based on the width of parent-element, if the parent-element width is less than or equal to 768px then similar style I have written in media query should apply.

Faisal Balouch
  • 49
  • 6
  • 3
    Can you add a little more detail to your question? Can you explain a scenario (using some code) in which new CSS should apply when the parent element's width changes? – Rounin Nov 20 '19 at 14:16
  • Thank you @dchang for sharing the similar question. – Faisal Balouch Nov 20 '19 at 14:36

0 Answers0