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?
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.
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.
https://test.prygara.com/about/ layout breaks in mobile view. can you take a look ?
Do you mean div class="inner-1" and div class="inner-1" are good candidates for section ?
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;
}
In that about page it looks like inner1 and inner2 could be separate section elements instead of divs.