From 9d0d077ad7a7a56f4c6a9e7591800f89369ff0e2 Mon Sep 17 00:00:00 2001
From: Guusvanmeerveld <mail@guusvanmeerveld.dev>
Date: Wed, 12 Oct 2022 18:40:17 +0200
Subject: [PATCH] fix(ui): change width of page on mobile devices

---
 .github/workflows/build.yml       | 8 ++++++++
 src/components/BestRepository.tsx | 2 +-
 src/components/Footer.tsx         | 2 +-
 src/components/Intro.tsx          | 2 +-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index eeeb4f0..8cbb539 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -11,14 +11,18 @@ jobs:
     steps:
       - name: Setup checkout
         uses: actions/checkout@v2
+
       - name: Setup NodeJS v12
         uses: actions/setup-node@v1
         with:
           node-version: 16
+
       - name: Install Dependencies
         run: yarn install
+
       - name: Check for syntax errors
         run: yarn test-build
+
       - name: ESlint check
         run: yarn lint
 
@@ -28,18 +32,22 @@ jobs:
     steps:
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v1
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v1
+
       - name: Login to DockerHub
         uses: docker/login-action@v1
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
+
       - name: Build Dockerfile and push
         id: docker_build
         uses: docker/build-push-action@v2
         with:
           push: true
           tags: guusvanmeerveld/portfolio:latest
+
       - name: Image digest
         run: echo ${{ steps.docker_build.outputs.digest }}
diff --git a/src/components/BestRepository.tsx b/src/components/BestRepository.tsx
index 131e8b9..cf22a35 100644
--- a/src/components/BestRepository.tsx
+++ b/src/components/BestRepository.tsx
@@ -9,7 +9,7 @@ const BestRepository: FC<{ repository: BestRepository }> = ({ repository }) => {
 		<div className="hero bg-primary">
 			<div className="container">
 				<div className="columns">
-					<div className="column col-8 col-mx-auto">
+					<div className="column col-8 col-md-12 col-mx-auto">
 						<h3 className="text-secondary">My most popular project:</h3>
 						<h1>{repository.name}</h1>
 						<h3 className="text-secondary">
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5bd8d68..f14901b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -10,7 +10,7 @@ const Footer: FC = () => {
 	return (
 		<footer className={multipleClassNames("container", styles.main)}>
 			<div className="columns">
-				<div className="column col-8 col-mx-auto">
+				<div className="column col-8 col-md-12 col-mx-auto">
 					<h3>Guus van Meerveld</h3>
 					<div className="columns mb-2">
 						<div className="column col-12">
diff --git a/src/components/Intro.tsx b/src/components/Intro.tsx
index cd012cb..8ddb97f 100644
--- a/src/components/Intro.tsx
+++ b/src/components/Intro.tsx
@@ -7,7 +7,7 @@ const Intro: FC<{ isAvailable: boolean }> = ({ isAvailable }) => {
 		<div className={styles.main}>
 			<div className="container">
 				<div className="columns">
-					<div className="column col-8 col-mx-auto text-center">
+					<div className="column col-8 col-md-12 col-mx-auto text-center">
 						<h1>Guus van Meerveld</h1>
 
 						<h3>