003-about page-flexbox vs grid options to further optimize for mobile

[810311]

Currently I just marked up the page in HTML and put some temporary CSS just to show to my client how it would look in desktop view.
https://test.prygara.com/about/

I have 2 questions:

1.In terms of HTML, is there any parts of the page where using section or say article element would be more appropriate?

2.Since I mostly used flexbox for now, is there any section of the page where grid would be a better choice considering I plan the following in mobile view?

[PaulOB]

@810311

Since I mostly used flexbox for now, is there any section of the page where grid would be a better choice considering I plan the following in mobile view?

If looks like you can easily achieve the display you want just by removing the display:flex on the parent in your media query at smaller screens so I don’t see a need for grid unless you have a more complex ordering of elements.

@810311

1.In terms of HTML, is there any parts of the page where using section or say article element would be more appropriate?

I’m not enamoured by your use of section as you seem to be using them for parts of content that are contained within a wrapping div that seems to have related content so they probably are one whole section.

Read the MDN documentation and satisfy yourself that your usage fits the documentation.

: The Generic Section element - HTML: HyperText Markup Language | MDN

[810311]

@PaulOB

If looks like you can easily achieve the display you want just by removing the display:flex on the parent in your media query at smaller screens so I don’t see a need for grid unless you have a more complex ordering of elements.

https://test.prygara.com/about/ layout breaks in mobile view. can you take a look ?

[810311]

@PaulOB

you seem to be using them for parts of content that are contained within a wrapping div that seems to have related content

Do you mean div class="inner-1" and div class="inner-1" are good candidates for section ?

[PaulOB]

@810311

layout breaks in mobile view. can you take a look ?

That’s because the form elements are too wide and the cards have a min-width of 250px so you are locking the width to a fixed 3 x 750px + padding and margin.

You need to make those cards fluid and use a max-width instead and then in a media query set them to display in a column and not 3 across.

The form is broken because you have used a span to wrap the controls and the span is an inline element and that makes the 100% widths inside based on the block parent instead which has padding and thus 100% is too big.

You can fix all the above with these changes which must follow the original code as it overwrites some values (nor all of them).

@media screen and (max-width: 1900px) {
  .about .cards {
    width: 100%;
    display: flex;
  }
  .about .card {
    max-width: 250px;
    width: auto;
    flex: 1 0 0;
  }
}

@media screen and (max-width: 500px) {
  .about .cards {
    flex-direction: column;
  }
}

.wpcf7-form-control-wrap {
  display: block;
}

@810311

Do you mean div class="inner-1"

In that about page it looks like inner1 and inner2 could be separate section elements instead of divs.

[810311]

@PaulOB

You need to make those cards fluid and use a max-width instead and then in a media query set them to display in a column and not 3 across.

Not sure if its a good idea but design wise it might look better. What if I wanted to have the following layout at 500px media query instead of just displaying cards in a column:

• Red arrow represents same green horizontal lines across under 1st and 2nd card. Would we use a pseudo element to insert such lines?

• The card content is displayed inline as shown on a screenshot
  Can this be done without rearranging HTML?

[810311]

@PaulOB

The form is broken because you have used a span to wrap the controls and the span is an inline element and that makes the 100% widths inside based on the block parent instead which has padding and thus 100% is too big.

Sorry which one would be a block parent with a padding? Its a Contact Form 7 plugin. I just checked HTML - both label and span which are inline sit within p element which is block level. Looks legit.

[PaulOB]

@810311

Can this be done without rearranging HTML?

Yes roughly like this:

@media screen and (max-width: 767px) {
  .about .cards {
    display: block;
    width: auto;
    justify-items: center;
  }

  .about .card {
    width: 100%;
    flex-flow: row;
    justify-content: center;
    margin: 1rem 0;
    border-bottom: 1px solid green;
  }

  .about .card .content ul {
    display: flex;
    list-style: none;
    margin: 0 0 0 1rem;
    padding-top: 0.4rem;
  }

  .about .card:last-child {
    border-bottom: none;
  }

  .about .card .content ul li:not(:last-child):after {
    content: "|";
    padding: 0 1rem;
  }

  .about .card .content {
    display: flex;
    align-items: center;
  }

  .about .card h2 {
    margin: 0;
  }

  .about .card h2:after {
    content: ":";
  }
}

@810311

both label and span which are inline

Yes they are valid but if you are going to add padding and dimensions etc they would usually be made display:block in css.

[810311]

@PaulOB

@media screen and (max-width: 500px) {
  .about .cards {
    flex-direction: column;
  }
}

If I decide to go with the option in post # 5 when we display cards in a column at 500px, how can I add a horizontal line below 1st and 2nd card like in the below picture? Do I adjust max-width 250px of each card or its something to do with pseudo-element?

[PaulOB]

@810311

how can I add a horizontal line below 1st and 2nd card like in the below picture

Just add a border-bottom to the card and for full width change the code like this:

@media screen and (max-width: 500px) {
  .about .cards {
    flex-direction: column;
   width:auto;
  }
  .about .card:not(:last-child){
   border-bottom :2px solid #36b759;
  }
  .about .card {width:100%}
}