Help with responsive code/media query

[ChrisjChrisj]

I have this code (below) where three words display horizontally across the mobile view of the web page, like this:
text1 and then text2 and then text3. But, I’d like those words to display like so:

text1
text2
text3
(like it does in the pc/desktop screen view).

Also, the squares don’t display at all, in the mobile view (but display in the pc/desktop screen view).

Ultimately, I’d like the mobile view to display like this:

text1 square1
text2 square2
text3 square3

Any help with my media query/responsive code below, to reach my goal, is appreciated.

@media only screen and (max-width: 480px){
  .animation-box3 {
    width: 95%;
     margin: 1% auto 0;
  }

      .animation-box31 {
        width: 95%;
       margin: 2% auto 0;
}

  .animation-box31 span {
  font-size: 4vw;
  }

  .square1
  {
  width: 3vw;
  height: 3vw;
  background-color: #ccc;
}

      .animation-box32 {
        width: 95%;
       margin: 2% auto 0;
}

  .animation-box32 span {
  font-size: 4vw;
  }

  .square2
  {
  width: 3vw;
  height: 3vw;
  background-color: #ccc;
}

 .animation-box33 {
  width: 95%;
  margin: 2% auto 0;
}

  .animation-box33 span {
  font-size: 4vw;
  }

  .square3
  {
  width: 3vw;
  height: 3vw;
  background-color: #ccc;
}
}


@media only screen and (max-width: 600px){
  .animation-box3 {
   margin: 1% auto 0;
  }

    .animation-box31 {
      width: 95%;
       margin: 1% auto 0;
  }

  .animation-box31 span {
  font-size: 4vw;

  }

  .square1
  {
  width: 3vw;
  height: 3vw;
  background-color: #ccc;
}



      .animation-box32 {
        width: 95%;
       margin: 2% auto 0;
}

  .animation-box32 span {
  font-size: 4vw;
  }

  .square2
  {
  width: 3vw;
  height: 3vw;
  background-color: #ccc;
}


      .animation-box33 {
        width: 95%;
       margin: 2% auto 0;
}

  .animation-box33 span {
  font-size: 4vw;
  }

  .square3
  {
  width: 3vw;
  height: 3vw;
  background-color: #ccc;
}
}



@media only screen and (max-width: 812px){
  .animation-box3 {
   margin: 1% auto 0;
  }

      .animation-box31 {
        width: 95%;
       margin: 2% auto 0;
}

  .animation-box31 span {
  font-size: 4vw;
  }

  .squares1
  {
  width: 3vw;
  height: 3vw;
  background-color: #ccc;
}



      .animation-box32 {
        width: 95%;
       margin: 2% auto 0;
}

  .animation-box32 span {
  font-size: 4vw;
  }

  .square2
  {
  width: 3vw;
  height: 3vw;
  background-color: #ccc;
}


      .animation-box33 {
        width: 95%;
       margin: 2% auto 0;
}

  .animation-box33 span {
  font-size: 4vw;
  }

  .square3
  {
  width: 3vw;
  height: 3vw;
  background-color: #ccc;
}
}

And here’s the html:

<section class="animation-box3">
<span class="animation-box31">
<span class="text1">textwords</span><span class="square1"></span><span class="text1-1">morewords</span>
</span>
<span class="animation-box32">
<span class="text2">textwords</span><span class="square2"></span><span class="text2-1">morewords</span>
</span>
<span class="animation-box33">
<span class="text3">textwords</span><span class="square3"></span><span class="text3-1">morewords</span>
</span>
</section>

How can I get the squares to display and how can I get the text and square lined up, with the responsive code; like so:

text1 square1
text2 square2
text3 square3

any help/tips/suggestions/guidance/examples are welcomed

[PaulOB]

You don’t have text1 and a square! You have text1 then a square and then the morewords text.

@ChrisjChrisj

<span class="text1">textwords</span><span class="square1"></span><span class="text1-1">morewords</span>

Therefore are you intending hiding the second text (morewords)?

Otherwise you have :

text1 square morewords
text2 square morewords
etc…

There are couple of issues with the code you posted in that the media queries are the wrong way around and all the media queries are over-written by the last media query. With max-width media queries you start with the largest width media query first and then work downwards. Otherwis the last media query overwrites all the others. (with min-width media queries you do it the other way around like you have done but using min-width instead).

Your main issue is that you are using spans and applying widths and height to them but spans are inline elements and dimensions do not apply. You would need to change the spans to display:inline-block where you want them sized but next to each other and then the wrapping span would need to be display block to get you a new line.

However none of that makes sense unless you answer my first question about where the ‘morewords’ text is supposed to go.?

[ChrisjChrisj]

Thanks for your reply.

Yes:
text1 square morewords
text2 square morewords
etc…

[PaulOB]

@ChrisjChrisj

text1 square morewords
text2 square morewords
etc…

Then do what I said above and it should work.

i.e.

.animation-box3 > span {
    display: block;
  } 
  .animation-box3 span {
    display: inline-block;
  }

[ChrisjChrisj]

VERY helpful, thank you for your kind assitance, much appreciated.
Regarding: “With max-width media queries you start with the largest width media query first and then work downwards. Otherwis the last media query overwrites all the others”.
I (now) get that the largest one overwrites the smaller ones, but not reall clear on this:
" (with min-width media queries you do it the other way around like you have done but using min-width instead)",

So,

@media only screen and (min-width: 480px){
@media only screen and (min-width: 600px){
@media only screen and (min-width: 812px){

this doesn’t overwrite?

In addition to that question, currently I have this:

@media only screen and (max-width: 812px){
.animation-box3 {
margin: 0 auto;
 display: block;
  width: 100%;
  border: 1px solid white;
}

Although it shows width:100%, the white border shows a margin on each side (which shows that “morewords” wraps to the next line). If the animation-box3 was as wide as the mobile view, I believe it wouldn’t wrap. Any solution for that is welcomed.
Much thanks again.

[PaulOB]

@ChrisjChrisj

this doesn’t overwrite?

Yes that’s correct.

A min-width of 480px applies to any screen that is 480px or larger.

Therefore if you had the 480px media query last in sequence then the two larger ones above it would be over-written (assuming you are addressing the same properties). Anything greater than 480px gets that rule. 2000px is greater than 480px, 3000px is greater than 480px. As that media query was last in sequence then it trumps the ones above because it is true as long as the screen is greater than 480px.

However if If you then follow with a 680px media query then once the screen gets to 680px then the 680px media query takes over. And so on…

A media query doesn’t isolate a style from other media queries. There has to be logic to the order just as there is with the cascade.

You could do media queries with a min-width and a max-width range but that is cumbersome.

[PaulOB]

@ChrisjChrisj

Any solution for that is welcomed.
Much thanks again.

I think I need you to put me up a codepen as I don’t think I’ve got all the details

There was no 100% in your original code and no border. You can’t add a border to a 100% wide element unless you are using the border-box model. You don’t need width:100% on a block level item anyway.

I don’t understand from your demo why you are duplicating everything and making the css 3 times as long when you could have used the same classes on all 3 rows.

I’ve put up a codepen here in a tidied up form and without the other media queries (which seemed to be the same anyway).

Perhaps you can use that code a s a basis and show me what you want to happen. Note I changed one of the spans to be a div so that it was more structurally sound.