Html Question posted in
Some basic documentation can be found here.

Html – How to split a solid block into parts on smaller screens

I wracked my brain trying to move ‘heading-to-remove-on-small-screens’ after the paragraph on smaller screens:

<div class="container">
  <h3 class="heading">
    I consist of the main part
    <span class="heading-to-remove-on-small-screens pink">
      and the part that should go down on smaller sreens
    </span>
  </h3>
  <p>I am the one who splits the heading on smaller screens</p>
</div>

Basically, I’m trying to get something like this:

<div class="container">
  <h3 class="heading">
    I consist of the main part
  </h3>
  <p>I am the one who splits the heading on smaller screens</p>
  <h3 class="heading-to-remove-on-small-screens pink">
    and the part that should go down on smaller sreens
  </h3>
</div>

Nothing except for duplicating the text in layout and manipulate it in CSS comes to my mind but that’s considered a bad practise. I’m supposed to solve it with pure CSS.
I’d greatly appreciate some help!

I tried making the container a grid/flex but in this case, on bigger screens my heading doesn’t look like solid text (parts have a line break)

Tags:

2

Answers


  1. 0

    You might do it like this (run the snippet and switch to fullscreen and back):
    and read the comments in CSS.

    h3 {
  display: inline; /* to have them in one line */
}

@media (max-width:719px) { /* or whatever your "smaller" is */
  section {
    display: flex; /* flex, so we could use order */
    flex-flow: column;
  }
  h3+h3 {
    order: 999; /* maybe overkill, just to be sure it goes to the very bottom */
  }
}

/* ignore the following*/
section * {margin: .25em 0}
    <section>
  <h3>
    I consist of the main part
  </h3>
  <h3>
    and the part that should go down on smaller sreens
  </h3>
  <p>I am the one who splits the heading on smaller screens</p>
  <p>Me too</p>
  <p>So am I</p>
</section>
    Login or Signup to reply.
  2. 0

    Use ::after pseudo-element and media queries to get required behavior. View in Full page mode and then resize the window. Details are commented in example.

    /*
Add this if you don't want any line-breaks in the first <h3>
*/
h3:first-of-type {
  white-space: nowrap;
}
/*
Use ::after pseudo-element to render the text that changes 
position.
Add a space before the text since there's text before it.
*/
h3:first-of-type::after {
  content: " and the part that should go down on smaller screens";
}

/*
This media query is common for phones in portrait mode.
The first <h3> ::after is blank.
The last <h3> ::after is now the moving text.
*/
@media only screen and (max-width: 600px) {
  h3:first-of-type::after {
    content: "";
  }
  h3:last-of-type::after {
    content: "and the part that should go down on smaller screens";
  }
}
    <!-- 
You cannot change markup without JavaScript.
You can change how markup appears with CSS with certain
limitations.
Easiest way is to use empty elements like in this particular 
layout an empty <h3>.
-->
<header>
  <h3>I consist of the main part</h3>
  <p>I am the one who splits the heading on smaller screens</p>
  <h3></h3>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search