Rearrange HTML elements for mobile

I’m just taking a guess that the solution to this problem would be a JavaScript one —

https://bit.ly/SWD-test

On a computer browser I really enjoy the way images and the corolatting text alternates between the two columns. Unfortunately, this looks kind of silly when this same content is condensed into one column on a mobile browser and images and texts no longer alternate.

Is there a solution to this kind of structural problem?

It really depends upon just how you would like the design to appear on mobile.
It could alternate between text and image in one column, or perhaps omit the images or have them smaller, whatever you think best.

It look more like CSS to me, it’s page layout.

2 Likes

Hi,

You have made the classic mistake of arranging your html to suit the display rather than having semantic and logically structured html first and then arranging it to suit.

You could have simply had image first and then html content second and kept that order rather than switching the html around to get your images left and right. With flexbox you can switch the alignment of image and text easily by using the order property or structuring your html in pairs and using flex-direction reverse on odd rows to change the content around. That means you would have had to just remove the flex rules in your media queries for smaller screen and it would align logically.

As it stands you can still move things around in the media query but it becomes more awkward as you have no logical structure and would need to address each item individually.

The following code will do what you want but assumes the html is static.

@media screen and (max-width: 480px) {
  #two .row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }

  #two .row > article {
    display: flex;
  }

  #two .v-center {
    top: 0;
    transform: none;
    margin: auto;
  }
  #two .row > article .v-center p {
    margin: 0;
  }
  #two .row > article .v-center p + p {
    margin: 2rem 0 0;
  }

  #two .row > article:nth-child(1) {
    order: 1;
  }
  #two .row > article:nth-child(2) {
    order: 2;
  }
  #two .row > article:nth-child(3) {
    order: 4;
  }
  #two .row > article:nth-child(4) {
    order: 3;
  }
  #two .row > article:nth-child(5) {
    order: 5;
  }
  #two .row > article:nth-child(6) {
    order: 6;
  }
  #two .row > article:nth-child(7) {
    order: 8;
  }
  #two .row > article:nth-child(8) {
    order: 7;
  }
  #two .row > article:nth-child(9) {
    order: 9;
  }
  #two .row > article:nth-child(10) {
    order: 10;
  }
}

That would start to look like this:

Regarding the semantics of the page you have an article element that is completely empty of content (you use a background image). That means it can’t be an article as there is no content and screen readers won’t know what the image is about and assume it is decoration. If the image is actual content (and it seems to be as you have made it a link) then the image should be in the html and not as a background image. It also appears that the image is related to the text content that follows (or precedes) and if this is the case then they should both be in the same article element. This would structure the code better and allow for easy manipulation of the display with flexbox.

I would also think about using media queries to reduce the height of your image-fit class on mobile as a 350px tall image on mobile takes up the whole viewport and means you continually have to scroll to get the content.

4 Likes