Mobile site-content being mushed

Question

Im coding a website for myself (Jerico) and decided to test it on mobile but all the content is shoved to the left. I tried using meta-viewport and tweacking CSS but it doesn't work. Can someone help me get the website not all mushed together on mobile?

I've spent like 9 hours coding this for no reason and doing research and can't figure anything out. Please help.

Here is my website and Github for it: jericogit.github.io/Jerico/Index.html https://github.com/JericoGit/Jerico

Answer 1

There a few reasons why you're website is doing that on mobile. I can see that you're using flexbox which is a good start but there are things that can be done to make it wrap properly. I will note though that some people prefer grids, but I prefer flexbox, so I'll make suggestions based on that.

First, for the body I like to add overflow: hidden; to stop any overhang on the website.

body {
  /* your css */
  overflow-x: hidden;
}

Next, we can tackle the content squishing. There are at least two easy ways to approach it.

Option 1 I use this option sometimes, but I prefer option #2. In this one you're applying the flex-wrap: wrap; property, essentially telling all the children in the parent to wrap to the next line when there isn't enough page space.

.cards {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

Option 2 I like do to do a combo of media queries, I find it looks cleaner.

.cards {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media only screen and (min-width: 1000px) {
    .cards {
        flex-direction: row;
    }
}

Your design will look much cleaner if you the following sizing trick:

1. Apply width: 100%; to the element
2. Set a max-width: ###em/px/etc.

This way your elements will look more uniform, and will grow from small screen sizes up to your maximum.

In terms of other changes to help with cleaner responsive design:

• You can use the CSS gap property instead of margins around the elements
• I don't know of many, if any good reasons to use a fixed height on your elements. If you don't remove the fixed height from .card, then the text will overlap other elements. If you must have fixed heights, you can add overflow-y: auto; to control that; but note that's not great UX.

---

EDIT

.cards {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.card {
    width: fit-content;
    max-width: 300px;
}