fix: avoid containers being wider than the viewport

icydigital · Dec 16, 2023 · 6c22fbe · 6c22fbe
1 parent fbfbafc
commit 6c22fbe
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 25 deletions.
diff --git a/src/App.css b/src/App.css
@@ -157,7 +157,7 @@
   padding-bottom: 2.5vh;
   -ms-flex-direction: column;
   -ms-flex-wrap: wrap;
-  -webkit-flex-flow: row wrap; 
+  -webkit-flex-flow: row wrap;
 }
 
 .soundProjectListContainer {
@@ -168,7 +168,7 @@
   margin: .5vw; 
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   height: 100%;
 }
 
@@ -187,7 +187,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  /* height: 5vh; */
+  /* width: 100%; */
 }
 
 .soundProject {
@@ -203,20 +203,8 @@
   height: auto; 
 }
 
-.soundPicFirst {
-  width: 100%; 
-  height: auto; 
-}
-
-.soundPicLast {
-  width: 100%; 
-  height: auto; 
-}
-
-@media screen and (max-width: 500px) {
-  .soundProjectListContainer { margin: 0; }
-  .soundContainer .col2 { padding: 0; }
-
+@media screen and (max-width: 450px) {
+  .soundContainer .col2 { padding: 0; width: 100vw; }  
 }
 
 .InstagramIconCC {
@@ -251,7 +239,7 @@
 }
 
 .AppFooter,
-.VideoHeader {
+.AppHeader {
   font-size: 2vmin;
 }
 

diff --git a/src/components/Frame.js b/src/components/Frame.js
diff --git a/src/components/Screens.js b/src/components/Screens.js
@@ -1,6 +1,6 @@
 import React from "react"
 import {
-  VideoHeader,
+  AppHeader,
   HomeFooter } from './Frame.js'
 
 import allforyou from "../assets/All_for_you.png"
@@ -24,7 +24,7 @@ export class Sound extends React.Component {
   render () {
     return (
       <div className="AppContainer">
-        <VideoHeader/>
+        <AppHeader/>
       <div className="soundContainer">
         <div className="col1">
           I offer MUSIC SUPERVISION and tailor-made compositions for commercials, 
@@ -92,7 +92,7 @@ export class Sound extends React.Component {
           </div>
           <div className="soundProjectListContainer">
             <a className="soundProjectLinkLast" href={danfoxUrl} target="_blank" rel="noreferrer">
-              <img className="soundPicLast" src={danfox} alt="Dan_FOX"/>
+              <img className="soundPic" src={danfox} alt="Dan_FOX"/>
             </a>
             <div className="soundProjectDescription">
               <br></br>