Scaling issue

Edrol97 · Jun 21, 2024

Hi all, I'm making a CV page and it's not quite scaling as I would like. There are 2 CSS files that the page is working from and the code from these is attached. The result scaled is also attached. I want it to stay in it's defined columns with title text on the left and paragraphs on the right. I also attach my HTML, which I fear there is a problem with as it takes some lines into the other div as it is scaled. I'll attach a video too.

CSS:

@font-face {
  font-family: Eliot Lord;
  src: url(Fonts/Eliothand2-Regular.otf);
}
@font-face {
  font-family: Montserrat;
  src: url(Fonts/Montserrat-Regular.ttf);
}
@font-face {
  font-family: Montserrat ExtraBold;
  src: url(Fonts/Montserrat-ExtraBold.ttf);
}
body {
  opacity: 100%;
  font-family: Eliot Lord;
  font-size: 2.2dvw;
  margin: 0;
  user-select: none;
  -webkit-user-drag: none;
  cursor: url(img/background/cursors/Mouse%20cursor.png),
    url(img/background/cursors/pointer1.png), pointer;
}
#TheHeadlines {
  border: 10px solid white;
  background-color: white;
}
h1 {
  background-color: #e5e5e5;
}
p {
  font-weight: 800;
}
.GBBlues {
  background-color: white;
}
header {
  background-color: white;
  fill: white;
}
header #headlogo {
  right: 0;
}
p {
  left: 0;
}
body {
  background-color: #e5e5e5;
}
.footer {
  background-color: #e5e5e5;
  display: block;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.footer a {
  font-family: Montserrat;
  color: black;
}
.footer :hover {
  font-family: Montserrat ExtraBold;
  color: black;
}
.footer img {
  bottom: 10px;
  right: 0;
}
.column {
  background-color: #e5e5e5;
  padding: 0;
  float: left;
  width: 300px;
}
.gbbluesnavbar {
  fill: linear-gradient(
    to right,
    #000f55,
    #011564,
    #011668,
    #071a6d,
    #1131a3,
    #1131a4
  );
  background-color: white;
  text-decoration: none;
  border-top: 6px solid #d42027;
}
.gbbluesnavbar :hover {
  font-weight: 1000;
}
.line-5 {
  height: 15px;
  line-height: 15px;
  background-color: #d42027;
}
#headlogo {
  right: 100;
  top: 0;
  padding-bottom: 10px;
}
#headlogo {
  background-color: white;
}
h1 {
  font-size: 50px;
  font-size: 3dvw;
}
.gbbluesnavbar a {
  padding: 30px 30px 30px;
}
.gbbluesnavbar a {
  font-family: Montserrat;
  color: white;
  text-decoration: none;
}
.gbbluesnavbar :hover {
  font-family: Montserrat ExtraBold;
  color: white;
  font-weight: 900;
  text-decoration: none;
}
a:hover,
img[onClick],
div[onclick] {
  cursor: url("img/background/cursors/pointer1.png"),
    url("img/background/cursors/Mouse%20cursor.png"),
    url("img/background/cursors/Finger%20cursor.png"), pointer;
}
@media (max-width: 768px) {
  .caption_text {
    font-size: 26px;
  }
  .title_text {
    font-size: 28px;
  }
  .title_text1 {
    font-size: 28px;
    font-weight: 900;
  }
  .title_text4 {
    font-size: 28px;
  }
}
.caption_text,
.title_text,
.title_text1,
.title_text4 {
  font-family: "Eliot Lord";
}
#TheHeadlines {
  columns: 2;
  column-gap: 80px;
}
.title_text1 {
  font-weight: 900;
}
header .headlogo {
  float: right;
}
#bio {
  background-color: white;
}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 40px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  padding-bottom: 20px;
  bottom: 100px;
  float: right;
}
.fa:hover {
  opacity: 0.7;
}
.fa-facebook {
  background: #2e73b7;
  color: white;
  height: 40px;
  width: 40px;
  right: 0;
  bottom: 0;
}
.fa-twitter {
  background: #429bd6;
  color: white;
  height: 40px;
  width: 40px;
}
.fa-instagram {
  background: #ffffff;
  height: 40px;
  width: 40px;
}
.title_text2 {
  width: screen;
}

CSS:

@font-face {
  font-family: Montserrat-ExtraBold;
  src: url(Fonts/Montserrat-ExtraBold.ttf);
}
@font-face {
  font-family: Montserrat;
  src: url(Fonts/Montserrat-Regular.ttf);
}
body {
  opacity: 100%;
  font-family: Eliot Lord;
  font-size: 2.2dvw;
  margin: 0;
  user-select: none;
  -webkit-user-drag: none;
  cursor: url(img/background/cursors/Mouse%20cursor.png),
    url(img/background/cursors/pointer1.png), pointer;
}
#TheHeadlines {
  border: 10px solid white;
  background-color: white;
}
header {
  background-color: white;
  fill: white;
}
body {
  background-color: lightgrey;
}
.footer {
  background-color: lightgrey;
  display: block;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 1rem;
}
.footer img {
  bottom: 10px;
  right: 0;
}
.column {
  background-color: lightgrey;
  padding: 0;
  float: left;
  width: 300px;
}
.gbbluesnavbar {
  fill: linear-gradient(
    to right,
    #000f55,
    #011564,
    #011668,
    #071a6d,
    #1131a3,
    #1131a4
  );
  background-color: white;
  text-decoration: none;
  border-top: 6px solid #d42027;
}
.line-5 {
  height: 15px;
  line-height: 15px;
  background-color: #d42027;
}
#headlogo {
  right: 100;
  top: 0;
  padding-bottom: 10px;
}
#headlogo {
  background-color: white;
}
h1 {
  font-size: 50px;
  font-size: 3dvw;
}
.gbbluesnavbar a {
  padding: 30px 30px 30px;
}
.gbbluesnavbar a {
  font-family: Montserrat;
  color: white;
  text-decoration: none;
}
.gbbluesnavbar :hover {
  font-family: Montserrat-ExtraBold;
  color: white;
  font-weight: 1000;
  text-decoration: none;
}
a:hover,
img[onClick],
div[onclick] {
  cursor: url("img/background/cursors/pointer1.png"),
    url("img/background/cursors/Mouse%20cursor.png"),
    url("img/background/cursors/Finger%20cursor.png"), pointer;
}
@media (max-width: 768px) {
  .caption_text {
    font-size: 26px;
  }
  .title_text {
    font-size: 28px;
  }
  .title_text1 {
    font-size: 28px;
  }
  .title_text4 {
    font-size: 28px;
  }
}
.caption_text,
.title_text,
.title_text1,
.title_text4 {
  font-family: "Eliot Lord";
}
#TheHeadlines {
  columns: 4;
  column-gap: 20px;
}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  padding-bottom: 20px;
  bottom: 100px;
  float: right;
  display: flex;
  flex-direction: column;
  vertical-align: auto;
  columns: 1;
}
.fa:hover {
  opacity: 0.7;
}
.fa-facebook {
  background: #2e73b7;
  color: white;
  height: 40px;
  width: 40px;
}
.fa-twitter {
  background: #429bd6;
  color: white;
  height: 40px;
  width: 40px;
}
.fa-instagram {
  background: #ffffff;
  height: 40px;
  width: 40px;
}
.column1 {
  left: 0;
  bottom: 0;
}
.footer a {
  font-family: Montserrat;
  color: black;
  padding: 0px, 20px, 20px;
}
.footer :hover {
  font-family: Montserrat-ExtraBold;
  color: black;
}

HTML:

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="GB_Blues.css"/>
  <link rel="stylesheet" href="cv.css"/>
  <link
    rel="icon"
    type="image/x-icon"
    href="img/background/GBBluesFavicon.png"
  />
  <body>
    <header style="background-color: white;">
      <div id="headlogo" style="background-color: white;">
        <a href="GB_Blues.html"> <img align="right" src="img/background/GBNonNews.png" width="20%" /></a>
      </div>
    <div id="header" style="background-color: white;">
    
    <h1 style="background-color: white;" >The CV</h1>
    <br />
</div>
</header>
    <div
      class="gbbluesnavbar"
      style="
        background: linear-gradient(
          to right,
          #031054,
          #071a6d,
          #1131a3,
          #1131a4
        );
        padding: 40px 40px 40px;
        left: 0;
      "
    >
      <a href="Home.html">Hello</a>
      <a href="about_me.html">The Bio</a>
      <a href="Art.html">The Show</a>
      <a href="cv.html">The CV</a>
    </div>
    <div id="GBBlues">
    <h1 style="font-weight:900;" >Who am I and why should you listen to me?</h1>
     <h3>
      I am an artist illustrator based in deepest darkest London. I'm an autistic artist and I am outraged by the government's inaction on certain issues, including but not limited to Climate Change, Poverty and Education.
      I obviously enjoy drawing but also love politics and psephology, love to sing and am in a choir called TakeTwenty which rehearses every week, and love to experiment with artist media and ideas. My mind runs a mile a minute so watch this space. 
    </h3>
    <div id="TheHeadlines">
    
      
        <div class="column1">
     
 
    
      <div class="title_text1">
        <p>EXHIBITIONS</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      EDUCATION
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      ACHIEVEMENTS
        <br>
        <br>
        <br>
        <br>
        <br>
      SKILLS

      </div>
      <div class="column2">
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <p>KSA Degree Show 2019, Knights Park</p>
      <p>A Very Brexish Summer, BCXhibition, Bentall Centre</p>
      <p>Bloomberg New Contemporaries 2019, South London Gallery and Leeds Art Gallery</p>
      <p>31 Nights In Europe 2019, Peckham Pelican</p>
      <p>Tate Exchange Sale with Central Saint Martins</p>
      <p>Art on A Postcard Summer Auction 2020, Albright Mayfair</p>
      <p>Summer Show 2020, Royal Academy</p>
      <p>Mycelium, Hatton Gallery 2022</p>
      <p>The Great Greenwich Pub Exhibition, Professional Cartoonist Organisation, The Duke of Greenwich</p>
      <p>Summer Lovin', Professional Cartoonist Organisation, The Duke of Greenwich</p>
      <p></p>
      
        <br>
      </div>
      <br>
      
      <p>Kingston University Foundation 2016 Pass</p>
      <p>Kingston University BA Fine Art 2016-2019 First</p>
      <p>MFA Fine Art Newcastle University 2019-2022 Merit</p>
      <br>
      <br>
      <br>
      <p>Showcase Minute Books Peckham Pelican 2020</p>
      <p>Everyday Blues Calendar 2023 By Oriel Wells at KesselKramer</p>
      <br>
      <br>
      <p>Political Journalism- an inquisitive mind looking into major news websites as well as the social media reaction to ensure that I am on top of what's going on at all times </p>
      <p>Daily research on current events</p>
      <p>Half-stack coding: Knowing how to build semi-complex websites</p>
      <p>Gif animation using Photoshop</p>
    </div>
     
    </div>
  </div>
    <br>
       <div class="footer" style="background-color: #e5e5e5;">
        <a href="https://www.facebook.com/house.of.lord.illustration1/" target="_blank"><img src="img/background/Facebook Logo.png" class="fa fa-facebook"></a>
        <a href="https://twitter.com/eliotlord1" target="_blank"><img src="img/background/Twitter%20Logo.png" class="fa fa-twitter"></a>
        <a href="https://www.instagram.com/house_of_lord_illustration/?hl=en" target="blank"><img src="img/background/Instagram logo.png" class="fa fa-instagram"></a>
    <br>
     <a href="Home.html">&#169 Eliot Lord 2024</a>
     <br>
     <br>
     <div class="column"><p><a href="Home.html">Phone Home</a></p></div>
     <div class="column"><p><a href="about_me.html">About Me</a></p></div>
     <div class="column"><p><a href="Art.html">The Show</a></p></div>
     <div class="column"><p><a href="mailto:[email protected]">Hit Me Up</a></p></div>
     <div class="column"><p><a href="The_Pun.html">The Pun</a></p></div>
     <div class="column"><p><a href="https://procartoonists.org/profile/eliotlord/">Trust Me, I'm a Professional</a></p></div>
     <div class="column"><p><a href="Bad_Times.html">Bad Times</a></p></div>
     <div class="column"><p><a href="Mail.html">The Fail</a></p></div>
     <a href="GB_Blues.html"><img src="img/background/GBNonNews.png" style="bottom: 100%;" width="200px"></a>
  <script src="script.js"></script>
       </div>
  </body>
</html>

JosiahMaybe · Jun 22, 2024

It looks like one extra </div> in your code, might want to put font Eliot Lord in quotes " ", and I might put body CSS in a separate .css file. Also, you may want like a position not all those br's but I do not know everything. Never seen dvw font size, I guess you would know what you are doing. In CSS, if it includes a space then using " " is good. Are titles supposed to be above columns of text? For all those br's I think just a position inside a div would work better. Maybe in vw and vh that position. X E.

JosiahMaybe · Jun 22, 2024

Not much to go by, are you getting any errors like in console?

Edrol97 · Jun 22, 2024

JosiahMaybe said:
Not much to go by, are you getting any errors like in console?

All divs are linked and no errors in my debugger. No errors in console, besides a js error that doesn't seem to effect the page.

Malcolm · Jun 22, 2024

Edrol97 said:
All divs are linked and no errors in my debugger. No errors in console, besides a js error that doesn't seem to effect the page.

Hey can you include all your HTML/CSS code?

Edrol97 · Jun 23, 2024

Malcolm said:
Hey can you include all your HTML/CSS code?

Hi Malcolm, have included all of the code now.

tomliv · Jun 24, 2024

Your page is very confusing. I am not sure what you are going for as far as layout. Your .column2 div is inside .column1. Column 2 is only content without headings. All headings seem to be in column 1. I am not understanding what you are trying to accomplish.

Malcolm · Jun 24, 2024

So I'm taking a crack at this and had to do a bit of restructuring; although not quite done, here's what I have so far:

Once I get everything structured I'll try to tackle your main issue

tomliv · Jun 24, 2024

Malcolm said:
So I'm taking a crack at this and had to do a bit of restructuring; although not quite done, here's what I have so far:View attachment 2694
Once I get everything structured I'll try to tackle your main issue

Kudos. My thoughts were going to Heads on own line over 4 cols of related content, repeat.

Malcolm · Jun 26, 2024

Okay, so here's what I got. I had to do some things, like linking external CSS files, which may be different from what you have, so you may have to make some adjustments.

Here are my changes:

Removed excess <br> tags.
Wrapped <nav> tags around navigation.
Wrapped intro text into it's own div and named it "intoText"
Created four additional div that contains the column headings
Added relevant text under each div that was created above.
Moved <link> tags within a <head> tag.
Removed any extra </div> tags.
Indented code for better visibility.
Moved <nav> under header tag.
Removed margins from <h3> tags.
Added a margin on column 1 to push the header "Education" to the next column.
Lowered font-weight for the p selector.
Wrapped Social icons into it's own div.

Something to keep in mind is certain placements, for example <html></html> tags contain all meta and content on the page. The meta details are in <head></head> tags within the html tags. then also in html tags is <body> that's where your content should be.

Example:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Your page</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>
            your page heading
        </h1>
        <p>
            your page text
        </p>
        <script src="js.js"></script>
    </body>
</html>

A few things to note: the font and other elements may not look the same for me as I don't have the required information for it to work.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css"/>
    <link rel="stylesheet" href="style2.css"/>
    <link
      rel="icon"
      type="image/x-icon"
      href="img/background/GBBluesFavicon.png"
    />
  </head>

  <body>
    <header style="background-color: white;">
      <div id="headlogo" style="background-color: white;">
        <a href="GB_Blues.html">
          <img align="right" src="img/background/GBNonNews.png" width="20%" />
        </a>
      </div>
      <div id="header" style="background-color: white;">
        <h1 style="background-color: white;" >The CV</h1>
      </div>
      <nav>
        <div
        class="gbbluesnavbar"
        style="
          background: linear-gradient(
            to right,
            #031054,
            #071a6d,
            #1131a3,
            #1131a4
          );
          padding: 40px 40px 40px;
          left: 0;
        "
      >
        <a href="Home.html">Hello</a>
        <a href="about_me.html">The Bio</a>
        <a href="Art.html">The Show</a>
        <a href="cv.html">The CV</a>
      </div>
      </nav>
    </header>

    <div id="GBBlues">
      <div class="introText">
        <h1 style="font-weight:900;" >Who am I and why should you listen to me?</h1>
        <h3>
          I am an artist illustrator based in deepest darkest London. I'm an autistic artist and I am outraged by the government's inaction on certain issues, including but not limited to Climate Change, Poverty and Education.
          I obviously enjoy drawing but also love politics and psephology, love to sing and am in a choir called TakeTwenty which rehearses every week, and love to experiment with artist media and ideas. My mind runs a mile a minute so watch this space.
        </h3>
      </div>

      <div id="TheHeadlines">
        <div class="column1">
          <h3>EXHIBITIONS</h3>
          <p>KSA Degree Show 2019, Knights Park</p>
          <p>A Very Brexish Summer, BCXhibition, Bentall Centre</p>
          <p>Bloomberg New Contemporaries 2019, South London Gallery and Leeds Art Gallery</p>
          <p>31 Nights In Europe 2019, Peckham Pelican</p>
          <p>Tate Exchange Sale with Central Saint Martins</p>
          <p>Art on A Postcard Summer Auction 2020, Albright Mayfair</p>
          <p>Summer Show 2020, Royal Academy</p>
          <p>Mycelium, Hatton Gallery 2022</p>
          <p>The Great Greenwich Pub Exhibition, Professional Cartoonist Organisation, The Duke of Greenwich</p>
          <p>Summer Lovin', Professional Cartoonist Organisation, The Duke of Greenwich</p>
        </div>
        <div class="column2">
          <h3>EDUCATION</h3>
          <p>Kingston University Foundation 2016 Pass</p>
          <p>Kingston University BA Fine Art 2016-2019 First</p>
          <p>MFA Fine Art Newcastle University 2019-2022 Merit</p>
        </div>
        <div class="column3">
          <h3>ACHIEVEMENTS</h3>
          <p>Showcase Minute Books Peckham Pelican 2020</p>
          <p>Everyday Blues Calendar 2023 By Oriel Wells at KesselKramer</p>
          <p>Political Journalism- an inquisitive mind looking into major news websites as well as the social media reaction to ensure that I am on top of what's going on at all times </p>
        </div>
        <div class="column4">
          <h3>SKILLS</h3>
          <p>Daily research on current events</p>
          <p>Half-stack coding: Knowing how to build semi-complex websites</p>
          <p>Gif animation using Photoshop</p>
        </div>
      </div>

<footer>
  <div class="footer" style="background-color: #e5e5e5;">
    <div class="socials">
      <a href="https://www.facebook.com/house.of.lord.illustration1/" target="_blank"><img src="img/background/Facebook Logo.png" class="fa fa-facebook"></a>
      <a href="https://twitter.com/eliotlord1" target="_blank"><img src="img/background/Twitter%20Logo.png" class="fa fa-twitter"></a>
      <a href="https://www.instagram.com/house_of_lord_illustration/?hl=en" target="blank"><img src="img/background/Instagram logo.png" class="fa fa-instagram"></a>
    </div>




<div class="column">
  <p>
    <a href="Home.html">Phone Home</a>
  </p>
</div>
<div class="column">
  <p>
    <a href="about_me.html">About Me</a>
  </p>
</div>
<div class="column">
  <p>
    <a href="Art.html">The Show</a>
  </p>
</div>
<div class="column">
  <p>
    <a href="mailto:[email protected]">Hit Me Up</a>
  </p>
</div>
<div class="column">
  <p>
    <a href="The_Pun.html">The Pun</a>
  </p>
</div>
<div class="column">
  <p>
    <a href="https://procartoonists.org/profile/eliotlord/">Trust Me, I'm a Professional</a>
  </p>
</div>
<div class="column">
  <p>
    <a href="Bad_Times.html">Bad Times</a>
  </p>
</div>
<div class="column">
  <p>
    <a href="Mail.html">The Fail</a>
  </p>
</div>


 <a href="GB_Blues.html"><img src="img/background/GBNonNews.png" style="bottom: 100%;" width="200px"></a>
 <a href="Home.html">&#169 Eliot Lord 2024</a>
 </div>
</footer>

  <script src="script.js"></script>
  </body>
</html>

CSS:

@font-face {
  font-family: Eliot Lord;
  src: url(Fonts/Eliothand2-Regular.otf);
}
@font-face {
  font-family: Montserrat;
  src: url(Fonts/Montserrat-Regular.ttf);
}
@font-face {
  font-family: Montserrat ExtraBold;
  src: url(Fonts/Montserrat-ExtraBold.ttf);
}
body {
  opacity: 100%;
  font-family: Eliot Lord;
  font-size: 2.2dvw;
  margin: 0;
  user-select: none;
  -webkit-user-drag: none;
  cursor: url(img/background/cursors/Mouse%20cursor.png),
    url(img/background/cursors/pointer1.png), pointer;
}
#TheHeadlines {
  border: 10px solid white;
  background-color: white;
}
h1 {
  background-color: #e5e5e5;
}
h3 {
  margin: 0;
}
p {
  font-weight: 300;
}
.GBBlues {
  background-color: white;
}
header {
  background-color: white;
  fill: white;
}
header #headlogo {
  right: 0;
}
p {
  left: 0;
}
body {
  background-color: #e5e5e5;
}
.footer {
  background-color: #e5e5e5;
  display: block;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.footer a {
  font-family: Montserrat;
  color: black;
}
.footer :hover {
  font-family: Montserrat ExtraBold;
  color: black;
}
.footer img {
  bottom: 10px;
  right: 0;
}
.column {
  background-color: #e5e5e5;
  padding: 0;
  float: left;
  width: 300px;
}
.gbbluesnavbar {
  fill: linear-gradient(
    to right,
    #000f55,
    #011564,
    #011668,
    #071a6d,
    #1131a3,
    #1131a4
  );
  background-color: white;
  text-decoration: none;
  border-top: 6px solid #d42027;
}
.gbbluesnavbar :hover {
  font-weight: 1000;
}
.line-5 {
  height: 15px;
  line-height: 15px;
  background-color: #d42027;
}
#headlogo {
  right: 100;
  top: 0;
  padding-bottom: 10px;
}
#headlogo {
  background-color: white;
}
h1 {
  font-size: 50px;
  font-size: 3dvw;
}
.gbbluesnavbar a {
  padding: 30px 30px 30px;
}
.gbbluesnavbar a {
  font-family: Montserrat;
  color: white;
  text-decoration: none;
}
.gbbluesnavbar :hover {
  font-family: Montserrat ExtraBold;
  color: white;
  font-weight: 900;
  text-decoration: none;
}
a:hover,
img[onClick],
div[onclick] {
  cursor: url("img/background/cursors/pointer1.png"),
    url("img/background/cursors/Mouse%20cursor.png"),
    url("img/background/cursors/Finger%20cursor.png"), pointer;
}
@media (max-width: 768px) {
  .caption_text {
    font-size: 26px;
  }
  .title_text {
    font-size: 28px;
  }
  .title_text1 {
    font-size: 28px;
    font-weight: 900;
  }
  .title_text4 {
    font-size: 28px;
  }
}
.caption_text,
.title_text,
.title_text1,
.title_text4 {
  font-family: "Eliot Lord";
}
#TheHeadlines {
  columns: 2;
  column-gap: 80px;
}
.title_text1 {
  font-weight: 900;
}
header .headlogo {
  float: right;
}
#bio {
  background-color: white;
}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 40px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  padding-bottom: 20px;
  bottom: 100px;
  float: right;
}
.fa:hover {
  opacity: 0.7;
}
.fa-facebook {
  background: #2e73b7;
  color: white;
  height: 40px;
  width: 40px;
  right: 0;
  bottom: 0;
}
.fa-twitter {
  background: #429bd6;
  color: white;
  height: 40px;
  width: 40px;
}
.fa-instagram {
  background: #ffffff;
  height: 40px;
  width: 40px;
}
.title_text2 {
  width: screen;
}

CSS:

@font-face {
  font-family: Montserrat-ExtraBold;
  src: url(Fonts/Montserrat-ExtraBold.ttf);
}
@font-face {
  font-family: Montserrat;
  src: url(Fonts/Montserrat-Regular.ttf);
}
body {
  opacity: 100%;
  font-family: Eliot Lord;
  font-size: 2.2dvw;
  margin: 0;
  user-select: none;
  -webkit-user-drag: none;
  cursor: url(img/background/cursors/Mouse%20cursor.png),
    url(img/background/cursors/pointer1.png), pointer;
}
#TheHeadlines {
  border: 10px solid white;
  background-color: white;
}
header {
  background-color: white;
  fill: white;
}
body {
  background-color: lightgrey;
}
.footer {
  background-color: lightgrey;
  display: block;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 1rem;
}
.footer img {
  bottom: 10px;
  right: 0;
}
.column {
  background-color: lightgrey;
  padding: 0;
  float: left;
  width: 300px;
}
.column1 {
  margin-bottom: 40px;
}
.gbbluesnavbar {
  fill: linear-gradient(
    to right,
    #000f55,
    #011564,
    #011668,
    #071a6d,
    #1131a3,
    #1131a4
  );
  background-color: white;
  text-decoration: none;
  border-top: 6px solid #d42027;
}
.line-5 {
  height: 15px;
  line-height: 15px;
  background-color: #d42027;
}
#headlogo {
  right: 100;
  top: 0;
  padding-bottom: 10px;
}
#headlogo {
  background-color: white;
}
h1 {
  font-size: 50px;
  font-size: 3dvw;
}
.gbbluesnavbar a {
  padding: 30px 30px 30px;
}
.gbbluesnavbar a {
  font-family: Montserrat;
  color: white;
  text-decoration: none;
}
.gbbluesnavbar :hover {
  font-family: Montserrat-ExtraBold;
  color: white;
  font-weight: 1000;
  text-decoration: none;
}
a:hover,
img[onClick],
div[onclick] {
  cursor: url("img/background/cursors/pointer1.png"),
    url("img/background/cursors/Mouse%20cursor.png"),
    url("img/background/cursors/Finger%20cursor.png"), pointer;
}
@media (max-width: 768px) {
  .caption_text {
    font-size: 26px;
  }
  .title_text {
    font-size: 28px;
  }
  .title_text1 {
    font-size: 28px;
  }
  .title_text4 {
    font-size: 28px;
  }
}
.caption_text,
.title_text,
.title_text1,
.title_text4 {
  font-family: "Eliot Lord";
}
#TheHeadlines {
  columns: 4;
  column-gap: 20px;
}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  padding-bottom: 20px;
  bottom: 100px;
  float: right;
  display: flex;
  flex-direction: column;
  vertical-align: auto;
  columns: 1;
}
.fa:hover {
  opacity: 0.7;
}
.fa-facebook {
  background: #2e73b7;
  color: white;
  height: 40px;
  width: 40px;
}
.fa-twitter {
  background: #429bd6;
  color: white;
  height: 40px;
  width: 40px;
}
.fa-instagram {
  background: #ffffff;
  height: 40px;
  width: 40px;
}
.column1 {
  left: 0;
  bottom: 0;
}
.footer a {
  font-family: Montserrat;
  color: black;
  padding: 0px, 20px, 20px;
}
.footer :hover {
  font-family: Montserrat-ExtraBold;
  color: black;
}

Welcome!

Scaling issue

Edrol97

Bronze Coder

JosiahMaybe

Gold Coder

JosiahMaybe

Gold Coder

Edrol97

Bronze Coder

Malcolm

Administrator

Edrol97

Bronze Coder

tomliv

Bronze Coder

Malcolm

Administrator

tomliv

Bronze Coder

Malcolm

Administrator

New Threads

Latest posts

Share this page

Buy us a coffee!

About Us

Site links

We value your privacy

Welcome!

Scaling issue

Bronze Coder

Gold Coder

Gold Coder

Bronze Coder

Administrator

Bronze Coder

Bronze Coder

Administrator

Bronze Coder

Administrator

Log in

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy