Unable to create a three-column responsive view for category headings on homepage.

[17dbouchier]

17/05

Summary of issue

I am currently unable to create a three-column responsive view for the category headings on the homepage. I have found many tutorials, but none that work. This may be due to the fact that my design includes smaller icons above each heading, which may be interfering with the position of the headings. I am still not very experienced in using flexbox, and much of fixing this issue so far has been guesswork.

This is the desired effect, with the circles representing icons:

Code and possible solutions

The CSS code for this section of the homepage is as follows: .container { display: flex; flex-wrap: wrap; width: 100%; } .container div { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; } .column-one { flex: 1; } .column-two { flex: 1; } .column-three { flex: 1; } .icon { width: 24vh; border-radius: 50%; border: solid 3px black; } .column-heading { font-size: 2rem; font-family: 'Oswald', sans-serif; font-weight: 500; text-align: center; }

A possible solution to this problem may be to adjust the padding settings on the icons or column headings, as the current settings may be interfering with the positioning of the items onscreen. There are other methods to creating three column views which I have used in the past, and looking at this past code may help in gathering an idea of a way to go forward regarding this issue.

[17dbouchier]

18/05

Update

Following correspondence with my teacher, I was able to make progress on this issue, by adding align-items: center; to .container div in CSS. This resulted in a shift in the items on screen which more closely matches the desired outcome:

However, this issue will not be closed until the positioning of these items has been refined using margin and padding. I will also wait to close this issue until the text placed under the headings and icons in the original design has been added.

[17dbouchier]

18/05

Update

After experimenting with adding a link to each column leading to their respective pages, I encountered a similar problem to what was seen when this issue was first opened. I am removing the links for now for the sake of my own sanity, however I still plan on adding them at a later date.

I believe that the new issue is being caused by how the CSS code is seeking <div> tags as I had to rearrange the HTML code in order to apply the <a> tags efficiently. This issue could be solved by experimenting with the arrangement of the <a> tags, as well as writing new CSS parameters which applies to the correct elements contained within the HTML.

[17dbouchier]

25/05

Update

Further progress has been made on this issue. The current layout is entirely responsive, although it still feels a bit bland, which may be solved by the DARK THEME DESIGN OVERHAUL!1!111!!

Another pet peeve of this current design is the that the first 'What is AI?' column has only two lines of subheader in full desktop view, whereas the other columns have three. This is a little frustrating, however it's definitely something I can live with.

This is a rather unclear demonstration of how the current layout responds to a mobile view. This may be changed in the future. The <a> links have yet to be added, as I am scared that this will wreak havoc on the progress that I have made thus far.

[17dbouchier]

02/06

Issue closed

As of writing this, I have managed to write some code which is easily applicable to almost any single-row-multiple-column layout, and I have applied this code to almost every element on the homepage. This code also has proper elements of responsiveness, assisted by media queries. The triple column layout now looks like this:

This has been applied to the dual column layout and the 'newsletter' section on the homepage. I also plan to possibly use this code for the other pages throughout the website.

Improvements to be made

When the website makes the transition to a darker colour scheme, some elements regarding the aesthetic of these column sections may need to change, and this is certainly something to consider for future releases.

[17dbouchier]

14/06

Update

Although this issue has already been closed, I am pleased to say that I have managed to integrate hyperlinks, complete with hover animations, into the triple column section on the homepage. It was not easy, but the final product works (very nearly) exactly as desired. When the user hovers over one of the hyperlinked columns, the column grows slightly in size, indicating clickability, emphasised by the cursor turning into a pointer finger. Once the user clicks on one of these columns, they are delivered to the appropriate page within the website, as expected.

Improvements to be made

The one (very minor) issue that I have with this feature currently is the unintentional transitions which occur when the user resizes the browser window. This is only a minor bug, and I have avoided applying this transition to columns without hyperlinks, and so minimal disruption is caused to the overall page. There could also be slightly different animations for all components within the column when the user hovers over the column, however improvements such as these are purely aesthetic-related and have little to do with improvements to the functionality of this overall component.