2 Replies - 344 Views - Last Post: 24 June 2020 - 07:07 AM

#1 chrisjchrisj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 04-February 19

Help with responsive code/media query

Posted 23 June 2020 - 07:04 PM

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. 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 appreciatd.


@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>



And any/all other guidance/suggestions will be welcomed.

This post has been edited by chrisjchrisj: 23 June 2020 - 07:08 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Help with responsive code/media query

#2 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Help with responsive code/media query

Posted 23 June 2020 - 11:37 PM

What have you attempted? What specific question or issue do you have?
Was This Post Helpful? 0
  • +
  • -

#3 chrisjchrisj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 04-February 19

Re: Help with responsive code/media query

Posted 24 June 2020 - 07:07 AM

Thanks for your reply.

Regarding "what have I attempted" I have attempted to get the text and square lined up as outlined in my post with the responsive code that I showed, without success; like so:

text1 square1
text2 square2
text3 square3

Regarding "what is your specific question or issue", how can I get the squares to display and how can I get the text and square lined up as outlined in my post with the responsive code that I showed; like so:

text1 square1
text2 square2
text3 square3

This post has been edited by chrisjchrisj: 24 June 2020 - 07:25 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1