1

I'm trying to make my site responsive using media queries. The outer DIV changes width but the width of the inner node(s) don't seem to change.

Purple is the outer DIV.

Normal desktop size, Blue=DIV

Inner text not changing with responsive size change.

Smaller size, blue color=DIV

The outer DIV gets smaller but the content stays the same width.

Here's the code:

.main{
 margin: 0px;
 width:1200px;
 background-color:blue;
}

.auto-style3{
 margin:0px;
 background: rgba(204, 204, 204, 0.7);
}

@media only screen and (max-width: 799px){
 .main{
  width:100%;
 }
 .auto-style3{
  width:100%;
 }
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="text.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="main">
    <div class="auto-style3" style="height: 100px; width: 1200px" >
        <h3 class="onama2"><b>O nama</b></h3>
        <h4 class="onama">Tvrtka Agrofit d.o.o. osnovana je 2012.godine s ciljem pružanja stručnog savjetovanja i ostalih usluga u poljoprivrednoj proizvodnji.
Proizvođače pratimo i savjetujemo "od sjetve do žetve" te svim partnerima nudimo <b>uslugu besplatne dostave za naše proizvode na području Republike Hrvatske.</b>
        </h4>
    </div>
</div>

</body>
</html>
bob
  • 7,539
  • 2
  • 46
  • 42
Ian Petek
  • 31
  • 1
  • 6
  • There's plenty of CSS on SO for this already, try the "vw" property, it could scale to screen size with no media-queries. http://stackoverflow.com/questions/11777598/font-size-relative-to-the-users-screen-resolution And please remove all inline styles! – Aaron Belchamber Mar 28 '17 at 16:10
  • The DIV with the auto-style3 class has a "style" attribute. Style attributes take higher priority over any other .class or #id rule definition. You have the width set to 1200px, hence the width will never change. – bob Apr 01 '17 at 07:52
  • Cleaned up the code and simplified the question (to get to the point). This is a good learning exercise for understanding CSS Specificity. – bob Apr 01 '17 at 08:05

3 Answers3

1

You'll need to apply a max-width to the .auto-style3 element so that it doesn't exceed the width of it's parent element.

.auto-style3 {
  margin: 0px;
  background: rgba(204, 204, 204, 0.7);
}

.main {
  margin: 0px;
  width: 1200px;
  background-color: blue;
}

.auto-style3 {
    max-width: 100%;
}

@media only screen and (max-width: 799px) {
  .main {
    width: 100%;
  }
  .auto-style3 {
    width: 100%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="text.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div class="main">

    <div class="auto-style3" style="height: auto; width: 1200px">
      <h3 class="onama2"><b>O nama</b></h3>
      <h4 class="onama">Tvrtka Agrofit d.o.o. osnovana je 2012.godine s ciljem pružanja stručnog savjetovanja i ostalih usluga u poljoprivrednoj proizvodnji. Proizvođače pratimo i savjetujemo "od sjetve do žetve" te svim partnerima nudimo <b>uslugu besplatne dostave za naše proizvode na području Republike Hrvatske.</b></h4>


    </div>

  </div>

</body>

</html>
UncaughtTypeError
  • 8,226
  • 4
  • 23
  • 38
  • Thank you, it works. Do i need to put this in everything that is inside that div – Ian Petek Mar 28 '17 at 16:10
  • You should probably apply it to any element with fixed widths and heights. I would go so far as to say avoid explicitly set widths and heights if you need to retain responsiveness and keep content dynamic. If you need to set explicit values, for whatever reason, try doing so with external styles (through your stylessheet) rather than inline styles, as inline styles carry more specificity and you'll have a headache trying to over-qualify them with your responsive styles (@media queries) – UncaughtTypeError Mar 28 '17 at 16:14
  • Thank you very much – Ian Petek Mar 28 '17 at 16:19
0

The options you have is either: a) Use the font-size property to change the size of the font, or b) use overflow on the container to make the content scrollable

EDIT: there are other options if you are happy for the text to wrap, see other answers on this question.

0

It's because you have a fixed width defined on the .auto-style3 div. Remove the inline style="height: 100px; width: 1200px"

http://codepen.io/JKudla/pen/KWGgpP

Jamie Kudla
  • 872
  • 3
  • 17
  • 37