fix(ui): change width of page on mobile devices

.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 }}

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">

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">

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>